Style Your Mobile Navigation

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.


How to Access the Mobile Navigation Styling Tools

  • Select Design from the Dashboard navigation bar.
  • If not already selected, select the Sitewide tab on the righthand sidebar.
  • Then, select Navigation on the sidebar.
  • Select the Mobile tab to view your mobile navigation design settings.
  • View the 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.
  • 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) 



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.

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.


Select Save and Publish to make all of your navigation changes live now.

 

    • Related Articles

    • Mobile Footer on a Bottom Navigation Layout

      When you select a bottom navigation layout within the Design panel, the mobile footer will not display. You may make design changes to the mobile footer but they will not be made visible as the mobile footer is disabled. The desktop footer will still ...
    • Navigation Layout Options

      We have a variety of site layouts with different navigation configurations. To see what layouts are available: 1. Select the Design tool in the gray navigation bar. On the right-hand sidebar, select Sitewide. At the top, select Layout. 2. Activate ...
    • Create a "Test Page" for Design and Content Options

      Sometimes, when you are designing your site or creating new content, you will want to have a page where you can test different blocks, content, or embeddable widgets. We recommend you add in a plain Generic page through your Content page. 1. Select ...
    • Add Your Logo or Change Your Sitename Design

      Changing your Image logo and sitename styling can easily be done within the Design panel. 1. Select the Design tool from the gray navigation bar. Under the Sitewide section in the right-hand menu, click on Header & Logo. 2. Select and Upload your ...
    • Change Ownership of a Site

      There are two different options for changing the site ownership, depending on if the site Owner has access to their email that is associated with the subscription or not. If the Owner has access to their email 1. Click on your site name in the gray ...