How to Create Menus #

Creating a Menu #

Zephyr uses default WordPress menu functionality. Read the WordPress Menu User Guide.

Adding attributes to Menu links #

Use the built-in WordPress fields for menu items, you can enable them in the "Screen Options" block:


Customizing Header Menu appearance #

Change menu options in the Menu header element

Customizing Header Menu dropdown #

Dropdown Settings are only available for the 1st level items with sub-items. Go to Appearance > Menus and click on the "Dropdown Settings" link:


Adjust settings in the opened window:


  • Width - set either Full Width or Custom Width in px (by default Full Width equals the Site Content Width from Theme Options > Layout Options)
  • Dropdown from - select the Header if you need the sub-items drop from the Header instead of parent menu item
  • Dropdown to - select where the drop-down list with sub-items will drop down: to the Left, to the Center, to the Right
  • Columns for sub-items - set a number of columns to be shown from 1 to 6
  • Inner indents (padding) - set custom padding around a dropdown content
  • Background Color - assign a custom Background Color
  • Text Color - assign a custom Text Color
  • Background Image - assign a custom background image and adjust its settings
  • Mobile Menu - allows to override the "Show dropdown by click on" for a separate menu item


Note if a 2nd level item has 3rd level items, it transforms to a “heading view” item:


If not — all 2nd level items display as usual:


Adding a Menu to a Footer or a page content #

To add a menu to a specific content area use the Simple Menu element of WPBakery Page Builder:


Adding a button to a Menu #

To transform any 1st level menu item (not sub item) to a button view, go to Appearance > Menus and select the desired Button Style from the dropdown.


Adding an icon to a Menu Item #

You can add an icon to your menu via adding <i class="fas fa-star"></i> at “Navigation Label” field of the menu item.


Change the fa-star to any other icon name from the FontAwesome list.

Adding a Page Block as a Menu Item #

Select one of the Page Blocks and add it as a Menu Item:

Uncheck the "Exclude Rows and Columns" box in order to keep the Page Block layout


Fallback Menu Location #

Zephyr 4.6.2 and above includes one Custom Menu location, it's a fallback location for 3-rd party plugins such as UberMenu, DigiMember etc. You don't need use this option in most cases.


Once the checkbox is checked, go to either Zephyr > Theme Options > Header Options > Menu Options (if the Header Builder is deactivated) or to Zephyr > Headers, edit the desired header, and select the corresponding menu, its name should contain Custom Menu in parentheses.

Hamburger Menu for Desktops #

When editing your site's header, hover the mouse cursor over the "Menu" element and click the edit icon to open its settings.


Next, open the "Mobile Menu" tab, and look for the "Show mobile menu when the screen width is less than" control: 


Move the slider to the extreme right position or specify the needed pixel value manually. Save changes for both element settings and your header. 

Now your site will display a hamburger layout for the menu element for both desktops and mobiles.