How to customize your navigation drop-down menu

The items in the drop-down menus in the main navigation are automatically generated by default. Menus will be generated for all default pages and custom pages that have sub-pages. The default menus are rendered in a simple format, containing text links structured as a list in the vertical orientation.

The DecoNetwork Website Editor gives you the flexibility to customize your menus and build feature-rich mega menus that let your customers easily find what they are looking for. You can add custom content. including images, icons, and links using widgets. You can configure the layout and design of the content using the design settings, and configure the style definitions of the content using the Style Editor.

To customize your drop-down menu:

1. Click on the DESIGN button in the Website Editor Toolbar.
   
2. Click on the PAGE OPTIONS menu item.

   The PAGE OPTIONS settings are displayed.

   
3. Scroll to the Header section and locate the Dropdown menu setting.
4. Select one of the following options from the Dropdown menu setting:
   
   • Specify Width (System Pages): makes the drop-down menu customizable and allows you to specify its width.

     Simply drag the sides of the menu container in the content area to adjust the width.

   • Content Width (System Pages): makes the drop-down menu customizable and makes its width fit the content.
   • Page Width (System Pages): makes the drop-down menu customizable and makes its width the full width of the page.
5. Click the Save button at the right of the Page Settings Bar.
6. Click the OK button when saving is complete.
7. Click on the PAGES button in the Website Editor Toolbar.
   
8. Scroll down to the SYSTEM PAGES section and click on the + symbol to expand the Dropdown Menus tab.
   
9. Click on the menu item you want to edit.

   The menu is displayed in the Content Area as you would see it when it is expanded, containing default content. The content is a widget that you can customize. For example, the Designs Page menu contains the Designs Categories Widget by default.

   

   In addition to the default content, sub-pages also automatically appear as items under a menu. For example, if the Products page has a sub-page called New Products, a link to the New Products page will appear below the blank product categories.

   
10. Customize the properties and design of the default widget in the menu.
    1. Move the mouse pointer over the widget.

       The widget's controls will be displayed.

    2. Click on the down arrow beside the widget icon.
    3. Choose the Settings item from the drop-down menu.
       

       The Settings popup will be displayed, with the Properties tab selected.

       
    4. Configure the widget's properties.

       The property settings will vary depending on the widget being configured.

    5. Click on the Design tab to configure the widget's layout and design.
       

       On mobile versions of the site, menus can simplified using the Show as Link(s) in Mobile Menu option. When enabled, this option will generate matching links for the content placed in the custom dropdown menu that will be rendered as a simple list of links on the site's mobile menu.

    6. Select from one of the pre-configured layout options.

       The layouts will vary depending on the widget being configured.

    7. Configure the rest of the design options for the selected layout.

       The settings will differ depending on the layout selected.

    8. Click OK in the Settings popup.
11. Customize the style definitions of the menu.
    1. Click on the DESIGN button in the Website Editor Toolbar.
    2. Click on the STYLE EDITOR menu item.

       The style settings are displayed.

       
    3. Configure the style settings.

       Click here for details about each of the settings.

12. Optionally, add content to the menu as desired by adding widgets and configuring the settings as you would when customizing an entire page. Alternatively, fully customize the menu by replacing the default content.

    Click here for an example of how to create a specific custom menu design - the mega menu.

13. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.