This section refers especially to navigation on mobile devices. However, it can also be customized accordingly for desktop.
This is how it looks like:
On mobile
On Tablet
On Desktop
This section is destined to customizing that menu. It is split into the following subsections:
OFFSCREEN MENU SETTINGS
Check the checkboxes to turn the classic menu into a hamburger menu, for desktop or/and for mobile devices.
OFFSCREEN MENU BUTTON SETTINGS
From here, you adjust the colors of the icon that expands the menu items.
- Button Normal Color (change the color of the icon in normal state)
- Button Sticky Color (change the color of the icon when scrolling down the page)
OFFSCREEN NAVIGATION BAR SETTINGS
This section refers to settings that apply to the “expanded” menu, after clicking on the hamburger menu.
Here are the options:
- Navigation bar color (this is the color you choose for the navigation bar expanded from the hamburger menu)
- Navigation bar overlay color (this is the color you choose for the overlay, when the menu items are expanded from the hamburger menu)
- Navigation texts color (this is the color you choose for the text of the menu items)
- Highlight color (this is the color you choose for a highlighted item in the menu)
- Highlight text color (this is the color you choose for the text in a highlighted item of the menu)
- Submenu background color
Offscreen Menu Typography
From here, you can adjust the typography settings for the menu items. Click to open the customization panel.
Here are the 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)
- Letter Spacing (this refers to the distance between the letters of the menu items; you can set it to broader or narrower)
- Text Transform (this applies capitalization, upper case or lower case to the menu items).
OFFSCREEN MENU SETTINGS – Social Icons
Some additional settings were added for you in this section. Precisely, from here you can choose to display social icons or to hide them. Check the checkbox for Offscreen Navigation Social Icons or leave the checkbox unchecked.
In case you choose to display social icons in the navigation bar, you have the possibility to change the icons and to add specific URLs for each social icon.