The Mobile (Offscreen) Navigation is also known as “hamburger menu”. The menu items are “hidden” behind a symbol for that menu, and they expand once visitors click on the respective symbol.
Mainly used for display on mobile devices, the Offscreen Navigation can also be used for display on desktop.
Go to the Customizer -> Navigation -> Mobile (Offscreen) Navigation.
Offscreen Menu Settings
If you enable the option to Show Offscreen Navigation on Tablet, you will apply this navigation type to the website as it is displayed on mobile devices.
To test how it appears on mobile devices, switch to preview for mobile and tablet, at the right bottom of the customizer.
If you enable the option to Show Offscreen Navigation on Desktop, you will apply this navigation type to the website as it is normally displayed on desktop.
You will instantly have a preview on the right hand of your screen, while customizing the website.
Offscreen Menu Button Settings
This subsection includes customization options for the symbol which, when accessed, deploys the menu items.
- You will have to decide upon the color of the button in normal state. Choose a color that stands out, so the symbol can easily be spotted into the webpage.
- You will have to select the color of the button, when the navigation bar sticks to the top, while users scroll down the page.
Offscreen Navigation Bar Settings
This third subsection refers to the way the navigation bar will look, after users have clicked on the menu button and expanded the menu.
Navigation Bar Color – when the navigation bar is expanded, after clicking on the menu symbol (button), it is displayed as a vertical column. Choose a specific navigation bar color for it, as it will be displayed when expanded.
Navigation Bar Overlay Color – the overlay is a semi-transparent color that is applied on top of the navigation bar, to obtain a nice visual effect. Choose a specific color for the overlay that will be attached to the navigation bar, when expanded.
Navigation Texts Color – this is the color the menu items will have in the navigation bar, after it has been expanded.
Highlight Color – the highlight color represents the color that is attached to the active item in the offscreen navigation bar. Choose the most appropriate color that will emphasize the active item in the menu.
Highlight Text Color – this is the color of the text corresponding to the active element in the menu. Choose an adequate color for the text of the active item and preview the results.
Submenu Background Color – this is the color of the background for the submenu. Choose it according to your design preferences.
Offscreen Menu Typography
From this subsection, you can set the typography style for the text contained in the menu items.
Click on Offscreen Menu Typography and open the panel with customization options for the text:
- Font Family – choose a font for the text of the menu items. If the font you want does not exist in the list of available fonts, you have the option to add a web font.
- Variant – choose a variant for the font you’ve chosen
- Font Size – define the dimensions of the font for the text of the menu items
- Line Height – this option refers to the vertical distance the line of text occupies in the list of menu items
- Letter Spacing – define the spacing between the letters of the text in the menu items
- Text Transform – turn the text into uppercase, lowercase, capitalize it, etc.
Offscreen Menu Settings – Social Icons
This subsection offers the possibility to add social icons to the navigation bar, when the offscreen navigation type is activated.
Click on Offscreen Navigation Social Icons and open the panel with customization options for each social icon you want to include in the navigation bar:
For all social icons, you can:
- Choose to show/not to show the icon
- Select the icon that is representative of the social network
- Provide the link to the respective social network account.