In the customizer, go to Navigation -> Front Page Navigation.
This section is split into 3 subsections:
FRONT PAGE NAVIGATION OPTIONS
- Stick to Top (check this to make the navigation bar sticky when in scrolling mode)
- 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)
- Border Options
- Bottom Border Color (select the color that is perfectly suited for your website)
- Bottom Border Thickness (adjust the thickness of the bottom border)
- Transparent Navigation Bar (check this to make the navigation bar transparent in normal state)
- Border Options
Navigation Bar Type
There are the following options:
- Logo on left, navigation on right
- Logo above menu
- Logo inside menu
- Logo on left, menu on center, custom area
- Menu on left, logo on center, custom area
- Logo on left, custom area on right, menu below
Choosing the right settings for appearance and layout will turn into a classy presentation of your business/blog. So, start by thoroughly customizing down to every little detail.
Navigation Style (this will help you give the desired visual aspect to menu items, in the navigation bar). These are the options:
- Simple text menu
- Underlined active item
- Active item with top line
- Active item with top and bottom line
- Active item as round button
- Active item as round bordered button
NAVIGATION MENU SETTINGS
In addition to the features above, there are further settings you can adjust for the navigation menu. These are as follows:
- Normal Menu Settings (click to open the customization panel; the changes will apply to the menu in normal state)
- Items align (left, center or right)
- Items color (this is the color the menu elements will have in normal state)
- Navigation bar color (choose the color of the navigation bar)
- Highlight color (it highlights the place/page where you are on the website)
- Highlighted item text color (the highlighted item text will have the color you select from this subsection)
- Hovered item text color (when you are hovering with the mouse over a certain item in the menu, the respective item text will have the color you define from this subsection)
- Sticky Menu Settings (click to open the customization panel; the changes will apply to the menu set to sticky while scrolling down the page)
- Items align (left, center or right)
- Items color (this is the color the menu elements will have when scrolling down the page)
- Navigation Bar Color (this is the color of the navigation bar when scrolling down the page)
- Highlight color (it highlights the place/page where you are on the website)
- Highlighted item text color (the highlighted item text will have the color you select from this subsection)
- Hovered item text color (when you are hovering with the mouse over a certain item in the menu, the respective item text will have the color you define from this subsection)
- Navigation Typography (click to open the customization panel; from here, you customize the typography of the menu items):
- Font Family (apply the font of your choice, or add a web font that you want)
- Font Size (determine the dimensions of the font)
- Mobile Font Size (set the dimensions of the font on mobile devices and check the preview for mobile)
- Line Height (this refers to the distance from the top and to the bottom at which the menu items are placed; the values are given in percentages)
- Letter Spacing (this refers to the distance between the letters of the menu items; you can set it to broader or narrower; the values are given in pixels)
- Text Transform (this applies capitalization, upper case or lower case to the menu items)
NAVIGATION SUBMENU SETTINGS
From here, you can customize the submenu settings, as follows: click on Submenu Colors and open the customization panel:
- Submenu Background Color (select the color you want for the submenu background)
- Text Color (select the color of the submenu items text)
- Hover Background Color (this is the color that is displayed when hovering over the submenu items with the mouse)
- Hover Text Color (this is the color that is displayed when hovering over the submenu items text with the mouse)
- Item Typography (adjust the typography of the submenu items, from the panel with the typography options)
- Font Family (apply the font of your choice, or add a web font that you want)
- Variant
- Font Size (determine the dimensions of the font)
- Mobile Font Size (set the dimensions of the font on mobile devices and check the preview for mobile)
- Line Height (this refers to the distance from the top and to the bottom at which the menu items are placed; the values are given in percentages)
- Letter Spacing (this refers to the distance between the letters of the submenu items; you can set it to broader or narrower; the values are given in pixels)
- Text Transform (this applies capitalization, upper case or lower case to the menu items).