Style your Navigation

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.Screen_Shot_2018-10-10_at_12.42.50_PM.png

In the screenshot below, you will see that there are two tabs to choose from, Desktop or Mobile. Desktop is chosen by default.Screen_Shot_2018-10-10_at_12.43.51_PM.png

2. Select your navigation style options under the Layout menu. We have 6 different navigation styles for you to pick from. Screen_Shot_2018-10-10_at_12.44.39_PM.png

3. You will see a spacing slider and an option to keep your navigation at the top of the browser screen, at all times. Screen_Shot_2018-10-10_at_12.45.35_PM.png

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.

Screen_Shot_2018-10-10_at_12.46.23_PM.png

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.

Screen_Shot_2018-10-10_at_12.47.17_PM.png

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.

Screen_Shot_2018-10-10_at_12.52.18_PM.png

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


Helpful Article: How do I style my mobile navigation?

    • Related Articles

    • Change the Font/Text Style of Your Navigation Menu

      You can change the font or text style of your Navigation menu items on your website's Design panel. Follow the steps below to change the appearance of your navigation menu. Click DESIGN at the top of your SpaceCraft dashboard. Click the Sitewide tab ...

    • Style Your Mobile Navigation

      We offer up a robust selection for your site's mobile navigation. Your site comes with a mobile navigation that will match the template you picked. You will find all customization options for your navigation within the Design tool. 1. Select the ...

    • Enable/Style Expandable Navigation in Your Side Navigation

      You have the ability to enable expandable menus in all of the side navigation layouts. An expandable menu is simply a section of pages you have categorized in your navigation menu that is able to be viewed by a click of the mouse. Note: These options ...

    • Set Mobile Navigation to Always be a Drop-Down Menu

      By default, your site's main navigation collapses to a drop-down menu on mobile devices. However, for your site's homepage in desktop view, you can choose to show the full navigation if the number of links is less than or equal to a certain ...

    • Style Your Password Protected Page

      After you password protect your page or website, you'll want to style the way it looks. 1. Select the Design tab in the gray navigation bar and click into the Sitewide tab in the right-hand menu, and select Styles. 2. Then, select Password Protection ...