Flex Navigation Overview

There are a a bunch of cool things you can do with the menus that you can not do with most menus in Rapidweaver.

Headers

You can have any part of a menu bar not be a link. All you need to do is make a new page, but not a stacks page. We suggest you use an Offsite Page and leave the URL setting blank. Then put this code in for the Page Title:

<header>Page Name</header>

Labels

You can add labels to drop down menus. Again, use an Offsite page and leave the URL setting blank. Then use this code for the Page Title:

<label>Name of the Label</label>

Dividers

If you have dividers turned off, but want to add one, you can do this by adding an Offsite Page and leaving the URL blank. Then use this code for the Page Title:

<hr>

Font Awesome

If you want to use Font Awesome icons for menus (with or without words), you can do so very easily. Just find the icon you want to use on http://fontawesome.io/icons/. Then put that code in the Page Title, like this:

<i class="fa fa-home fa-2x hide-for-small"></i>

or if you want to add the name of the page:

<i class="fa fa-home fa-2x hide-for-small"> Home</i>

Be sure to put that space before the name or the page name will be too close to the icon. Also, you will notice we added this little bit of code:

hide-for-small

This tells the theme to not show the Icon when the menu is considered small.

Buttons

Want to make one of your menu items a button, use this code (can be used on any page type):

<button>Page Name</button>

Using the code this way, will make the button the Primary Color in the Site Styles for the page. If you want to use a different color, use the code like this:

<button class="secondary">Page Name</button>

the class "secondary" will make the button be the secondary color in the Site Styles stack for the page. You can only uses these color settings from the Site Styles stack though:

• Primary
• Secondary
• Alert
• Success
• Warning
• Info

The other colors from the site styles stack will not work as options.

Page Titles

Remember, if you use these options with Top Bar, you will also want set the Browser Title in the page inspector:

or your browser title will look like this: