Style your Navigation

We offer up a vast selection of options for your site's navigation. Your site automatically comes with the styling chosen for your mobile navigation that will match the template you picked. You will find all the customization options for your navigation within the Design tool.

1. Select the Design tool from the gray navigation bar and click on the Navigation option under the Sitewide tab in the right-hand sidebar.


In the screenshot below, you will see that there are two tabs to choose from, Desktop or Mobile. Desktop is chosen by default.


2. Select your navigation style options under the Layout menu. We have 6 different navigation styles for you to pick from. 


3. You will see a spacing slider and an option to keep your navigation at the top of the browser screen, at all times. 


4. The Text panel adjusts default styling and font choices for all views of your navigation menu. Select your desired font and stylings for your navigation menu here.


5. If you use drop-down menus or a full-screen navigation menu, the Expandable Menus panel grants you the option to style your menu if you enabled a navigation menu that appears on a click or hover action. For example, the background color selected below is forest green, this background color would be seen in your dropdown menus and also in a fullscreen navigation menu.

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. Choose Extend nav background color/image under header if you would like the navigation background color to span under your header and logo.


6. Below Expandable Menus, open the Container area, and use this panel to adjust the padding around your navigation and it's background.

Select the background color for your navigation with the Color picker, or use the Background buttons to choose or upload a custom image pattern or background.


8. Select Save and Publish to take all of your changes live!

Helpful Article: How do I style my mobile navigation?
Powered by Zendesk