Configuring the navigation style for the front page

To customize the appearance of the front page navigation you have to access the Header Settings -> Front Page Navigation section in the Customizer. It is also recommended that you have the front page open in the Customizer as if you have other page opened you won't be able to see the changes you make in the customizer as they only apply to the front page.

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 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 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 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
  • Text transform

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.