Enable/Style Expandable Navigation in Your Side Navigation

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 the click of the mouse.

Note: These options are only available with side navigation layouts.

1. To start, you will want to create and organize your site map in Content by adding new pages or Navigation Items. See this article for steps on adding a secondary menu (only pages designated as secondary pages will be included in the expanded area):

2. Select Design in the top navbar, then on the right-hand side, under Sitewide select Navigation

Screen_Shot_2018-08-01_at_8.40.13_AM.png

 

Screen_Shot_2018-08-01_at_8.41.59_AM.png

3. From here, scroll down and open the Expandable Menus area

4. You will see an area for Sub-Navigation, click to dropdown your options: "Always expand" is the default option.

5. Select "Expand to click": choosing this option will place all secondary pages into collapsed dropdown areas that can be expanded via a click in the navigation menu.

Screen_Shot_2018-08-01_at_8.42.23_AM.png

To elaborate, "Expand on click" will enable the dropdown option in your navigation menu. Selecting "Always expand" will keep your navigation in its normal view where all pages/secondary pages are shown in the navigation menu. Make your design changes in this area, then select Save to finish.

6. You will also see options to style the navigation text color and the selected text color (current/selected page), along with the background color.

7. Now, go preview your site in a new tab, select each navigation item and if you decide you want one of the items to dropdown and not navigate its own page, then you will want to add a Navigation Item to your Pages. Select the "Text (No link)" type. 

On the live site, you will now notice a small arrow next to page's that are holding an area of secondary page links. Click the arrow to expand the pages, or select the page title to enter the actual page. Navigation Item's set to "Text (No link") will only expand the collapsed pages.

 

expand_menu.gif

    • 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 design.livebooks.com dashboard. Click the ...
    • Enable Mobile Navigation on Desktop

      You can use your website's mobile navigation even when it's viewed on a desktop. This can create a consistent experience for your visitors, especially if you prefer the mobile menu's compact design. Steps to Use Mobile Navigation on Desktop View ...
    • Add or Remove Padding from the Navigation Menu

      There are two ways to add and remove the padding from the navigation menu, on a site-wide scale and on a page-by-page basis. To remove the padding on a sitewide level, follow these steps: 1. Select Design 2. Select Sitewide in the Design panel on the ...
    • Add and Style a Map

      You can create a map on your website, which displays your location that you've entered in an Address block. Want to customize your map to make it more unique? You can easily change the style and color of your map, and choose from a large selection to ...
    • Change the Background of Your Mobile Navigation Menu

      The background of your expandable navigation menu on mobile devices can be changed to the color of your choice. How to Change the Mobile Navigation Background 1. Select the Design tool in the gray navigation bar. 2. Select Navigation under Sitewide ...