How do I style my navigation?

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

1. Select Design from the Dashboard navigation bar.

2. If not already selected, select the Sitewide tab on the righthand sidebar.

3. 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. Dropdown your navigation style options under the Layout dropdown menu (find the down-pointing arrow). We have 6 different navigation styles for you to pick from. Select the style for your navigation items here:

6. Take a look below the Layout dropdown menu, you will see a spacing slider and an option to keep your navigation at the top of the browser screen, at all times. Make changes here if you'd like:

7. 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:

8. If you use dropdown menus or a full screen navigation menu, the Expandable Menus panel grants you the option to style those features:

(A) The design settings made here are for your navigation menu if you enable a navigation menu that appears on a click or hover action. For example, the background color selected below is forrest green, this background color would be seen in your dropdown menus and also in a fullscreen navigation menu.

(B) 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. Below Expandable Menus, open the Container area, use this panel to adjust the padding around your navigation and it's background.

Tick off the option "Extend nav background color/image under header" if you would like the navigation background color to span under your header and logo.

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.


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

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