From this section, you will define the navigation settings for the front-page.
Go to the Customizer -> Navigation -> Front Page Navigation.
Let’s look at the different features this section includes.
Front Page Navigation Options
Stick to top
If you enable this option and check the checkbox for “Stick to Top”, the navigation bar will be set to sticky when visitors scroll down the page. When they land below the fold, the navigation bar will keep being visible, for ease of navigation within the website.
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
This option allows you to add a line (bottom border) delimiting the navigation bar from the rest of the webpage.
If you click on “Border Options”, a panel will open with customization options for this bottom border.
- You can set the color for the bottom border.
- You can set the thickness for the bottom border. The thicker the border, the more visible the color will be.
Transparent Navigation Bar
Check this to make the navigation bar transparent in normal state. When the navigation bar is set to transparent, there will be a more cohesive arrangement of colors into the webpage.
Type of Navigation Bar
There are 6 types of navigation bar, that differ from one another in terms of placement of the elements inside the respective navigation bar. These types are as follows:
- Logo on left, navigation on right
- Logo on center, navigation below
- Logo inside navigation (the logo is comprised in the navigation elements)
- Logo, navigation, custom area (you can add a custom button in the custom area)
- Menu, logo, custom area (you can add a custom button in the custom area)
- Logo, custom area, navigation below
Navigation Style
There are 4 different navigation styles, for you to choose from. Depending on what you find more useful for your readers, in terms of orientation, you can choose one of the following:
- Simple text menu – the elements are presented simply, without adding any marking
- Material Buttons – the elements receive additional marking, so the active item is visible as a Material button, and the other items become visible as Material buttons when hovering over with the mouse.
- Bordered active item – for this navigation style, the active item (e.g. the link representing the page on which the users landed) is underlined. In this case, it will be easier for them to stay oriented when navigating within the pages of your website.
- Background color active item – this option allows you to mark the active item by using a certain background color.
Button Settings
When using Material buttons for the navigation style, you have additional options for customizing those buttons.
Click on Button Settings and a panel will open with the customization possibilities:
- Buttons Spacing – this defines the spacing between the buttons
- Roundness – this defines how sharp or round the corners of the buttons are, for each element in the navigation bar.
Navigation Menu Settings
Normal Menu Settings
Click on Normal Menu Settings and you will open the panel with further customization options for the menu in normal state:
Items Align – this defines the alignment of the text (the items can be aligned to the left, at the center or to the right)
Items Color – this option defines the color of the items in the navigation bar. It refers to the “buttons” color, as the text can receive a certain color from another option in the panel
Active Item Color – this defines the color of the active item. It serves for orientation purposes, making navigation easier
Active Item Text Color – this defines the color of the text for the active item in the navigation bar. It should be set to contrast with the active item color, so it should be visible and serve effectively for orientation purposes
Hover Color – this refers to the color set for the items when visitors hover over with the mouse
Hover Item Text Color – this option refers to the color of the text for the items when visitors hover over them with the mouse
Sticky Menu Settings
These features apply to the navigation bar when it is set to sticky. Click on Sticky Menu Settings and open the panel with customization options:
Items Align – this defines the alignment of the text (the items can be aligned to the left, at the center or to the right)
Navigation Bar Color – from here, you set the color of the navigation bar when in scrolling mode, if the navigation bar is set to sticky
Items Color – this option defines the color of the items in the navigation bar, when the navigation bar is set to sticky. It refers to the “buttons” color, as the text can receive a certain color from another option in the panel
Active Item Color – this defines the color of the active item, when the navigation bar is set to sticky. It serves for orientation purposes, making navigation easier
Active Item Text Color – this defines the color of the text for the active item in the navigation bar, when the navigation bar is set to sticky. It should be set to contrast with the active item color, so it should be visible and serve effectively for orientation purposes
Hover Color – this refers to the color set for the items when visitors hover over with the mouse, for a sticky navigation bar
Hover Item Text Color – this option refers to the color of the text for the items when visitors hover over them with the mouse, in the case the navigation bar is set to sticky
Navigation Typography
From here, you set the typography style for the text of the items in the navigation bar.
The typography style can be configured using the following features:
- Font Family – select a type of font to apply to the text of the items in the navigation bar
- Variant – select a variant of the font you applied to the text of the items in the navigation bar
- Font Size – set the dimensions of the font for the text of the menu elements
- Line Height – this helps you define the vertical distance the line of text occupies in the navigation bar
- Letter Spacing – define from here the spacing between the letters of the text
- Text Transform – this helps you turn the text into uppercase, lowercase, capitalize the text, etc.
Navigation Submenu Settings
Submenu Colors
These settings are applied to the submenu elements:
- Background Color – choose the color for the submenu background
- Text Color – choose the color for the text of the submenu items
- Hover Background Color – select the color for the submenu background, when visitors hover over with the mouse
- Hover Text Color – select the color for the submenu items text, when visitors hover over with the mouse.
Item Typography
- Font Family – select a type of font to apply to the text of the items in the submenu
- Variant – select a variant of the font you applied to the text of the items in the submenu
- Font Size – set the dimensions of the font for the text of the submenu elements
- Line Height – this helps you define the vertical distance the line of text occupies in the navigation bar
- Letter Spacing – define from here the spacing between the letters of the text
- Text Transform – this helps you turn the text into uppercase, lowercase, capitalize the text, etc.