Style Your Mobile Navigation
We offer many options for you to customize your site's mobile navigation. Out of the box, your site comes with styling chosen for your mobile navigation that will match the design you picked. You will find all customization options for your navigation within the Design tool:
- Select Design from the Dashboard navigation bar.
- If not already selected, select the Sitewide tab on the righthand sidebar.
- Then, select Navigation:
In the screenshot below, you will see that there are two tabs to choose from, Desktop or Mobile. Desktop is chosen by default.
4. Select the Mobile tab to view your mobile navigation design settings.
5. Dropdown your icon options under the Layout dropdown menu. We give you 45 icons with over 130 icon style and shape variations to choose from, providing unique customization for you and your business' brand. Select the icon you like here:
6. Take a look below Layout and you will find all of your Icon settings, change how the icon looks and animates here:
| (A) Icon color - Choose your icon color via presets or choose any color in the rainbow with the color picker. |
| (B) Shape - Add a shape beneath your icon or leave it without one. |
| (C) Symbol Size - Adjust how large or small you want your icon to appear. |
| (D) Icon Position - Have your icon appear on the left or right side of your site. |
| (E) Style - Have your navigation appear from above or slide in from the side of the screen. |
(F) Reveal - Select how the navigation reveals the menu items:
Fullscreen - Fill the entire screen with your navigation menu, on the click action.
Push Content - Choose this option to have your navigation menu push your content over, on the click action.
Overlay Content - Choose this option to have your navigation overlay on top of all your content, on the click action.
(G) Animation - 5 different animation effects.
|
(H) Trigger -The trigger option is only seen when you choose the Dropdown feature under Style (E). Choose how your navigation menu is made visible with this option. Label & icon - Include the first navigation item's title with your icon on the side, the styled expandable menu displays beneath. Icon only - Show only the icon. |
| (I) Use mobile navigation on all devices - Enable to display the mobile navigation in all viewports/devices. Currently available on two layout types: Top Navigation (Logo Above) and Top Navigation (Logo Below) |
7. The Text panel adjusts default styling and font choices for all views of your navigation menu.
| (J) Select your desired font and stylings for your navigation menu. |
8. Within the Expandable Menus panel, design how the navigation menu appears on reveal.
| (K) The design settings made here are for your navigation menu if you enable a navigation menu that appears on a click action. |
|
(L) Sub-Navigation - Choose "Always expand" to make all sub navigation pages visible in the expanded menu. "Expand on click" makes an arrow appear and will require the customer to click the parent navigation item to view the child pages. |
9. Select Save and Publish to make all of your navigation changes live now.