To customize the appearance of the Front Page navigation, you have to access the Header Settings -> Front Page Navigation section in the Customizer.
This section is split into the following subsections:
Front page navigation options
- Transparent navigation bar – check this to make the navigation bar transparent in normal state
- Stick to top – check this to make the navigation bar stick to top when you scroll the page
- Boxed Navigation – check this to make the navigation bar the same size as other elements; by default, the navigation bar is wider
- Show Navigation Bottom Border – check this to enable a thick border under the navigation bar
- Nav bar color – this controls the color of the navigation bar, both in scrolled and normal state
Navigation typography
- Nav menu color – this controls the text color of the menu items in normal state
- Sticky nav menu color – this controls the text color of the menu items when scrolling down the page
- Navigation Typography – click this to open the typography panel from where you can change the menu text:
- Font Family
- Font Variant
- Font Size
- Mobile font size
- Line Height
- Letter spacing
- Text Transform
Navigation submenu settings
- Background Color – change this to set a background color for the submenu items
- Hover Color – change this to set a color for the submenu items when hovering over the respective items
- Item Text Color – change this to set the text color for the submenu items
- Item Typography – click this to open the typography panel from where you can change the submenu text typography:
- Font Family
- Font Variant
- Font Size
- Mobile font size
- Line Height
- Letter spacing
- Text transform
Text Logo Typography
- Text logo color – change this to set a color for the text logo
- Sticky nav text logo color – change this to set a color for the text logo when the navigation bar is set to sticky
- Text logo typography – click this to open the typography panel from where you can change the logo:
- Font Family
- Font Variant
- Font Size
- Mobile font size
- Line Height
- Letter Spacing
- Text Transform
To replace the text logo with an image logo you have to go to General Settings > Site Identity and set an image for the Logo.