Ways to Have Multiple Navigation Menus
A new version of the Navigation App has been released! Check it out!
What You’ll Learn
Navigation menus are a key part of most websites, as they allow your visitors to easily move around and find the pages they’re looking for. This tutorial goes through how to setup a primary and secondary navigation menu in the header of your website, and anchor or “pin” the secondary menu to the top of the page using the style options.
Note: this is a good alternative to having a sub-navigation menu (or drop-down menu options), which currently is not possible in our platform.
Steps for Creating Multiple Level Navigation Menus
Create a Navigation App and Duplicate it
1. Add a new version of the Navigation app to the header of your site.
2. Duplicate the Navigation app to create a second version.
3. Add or delete the entries (menu options), and edit the text in each to display the options you’d like to have.
4. Adjust the fonts and formatting (color, font, size, etc.) of the text menu options as needed. Tip: even if you don’t have all of the pages created yet which you’d like to link to, we recommend creating a link for each option so that you can set the default and roll-over link colors.
5. In order to “pin” or “anchor” one of the menus to the top of the page, decrease the top spacing in the column to 0 and then adjust the spacing in the app’s style dot to get the placement just right. You’ll then want to apply a background color to the app, which will give the entire menu a container that’s touching the top of the page, creating the desired “pinned” effect.
6. Adjust the styles however you’d like to achieve the look and feel you’re going for with the navigation menus.
Have question or comments about this tutorial? Let us know in the comments area below!