Configuring the navigation style for the inner pages
To customize the appearance of the inner page header background you have to access the Header Settings -> Inner Page Navigation section in the Customizer. It is also recommended that you have a subpage or a blog page open in the Customizer - if you have the front page open you won't be able to see the changes you make as they don't apply to the front page.
This section is split into the following subsections:
Inner 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 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 in scrolled state
- Navigation Typography - click this to open the typography panel from where you can change the menu text :
- Font Family
- Font Variant (weight)
- Font Size
- Mobile font size
- Line Height
- Letter spacing
Navigation submenu settings
- Background color - change this to set a background color for the submenu buttons
- Hover Color - change this to set a color for the hovered state of the submenu buttons
- Item Text Color - change this to set the text color for the submenu buttons
- Item Typography - click this to open the typography panel from where you can change the submenu text :
- Font Family
- Font Variant (weight)
- Font Size
- Mobile font size
- Line Height
- Letter spacing
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 is in sticky (scrolled) state
- Text logo typography - click this to open the typography panel from where you can change the logo :
- Font Family
- Font Variant (weight)
- Font Size
- Mobile font size
- Line Height
- Letter spacing
To set replace the text logo with an image logo you have to go to General Settings > Site Identity and set an image to Logo and Dark logo. Dark logo is used in sticky (scrolled) state.