Menu setup

Now that you have uploaded your logos and configured your navigation bar, you're ready to setup your menus. You can do this by navigating to Appearance ➝ Menus within your WordPress admin dashboard.

To create a new menu click create a new menu, enter a name for your menu within the Menu Name field and click the Create Menu button.

You can add pages, posts, and categories to your menu by clicking the respective tabs on the left, checking the boxes you wish to add and clicking the Add to Menu button.

To add custom links, click on the custom links tab on the left, fill in the URL and Link Text fields and click the Add to Menu button.

The checked menus then appear in the Menu Structure section where they can be arranged in any order by drag and drop. 

Once you've ordered the menu items click Save Menu.

Menu locations

There are 3 menu locations in Float, in the top navigation bar (Top), in the footer (Bottom), in the side panel (Side) and in the side panel on small mobile devices (Mobile). You'll need to assign a location for each menu that you create.

To do so, select the menu from the dropdown list and click Select. When the selected menu has loaded, scroll down to Menu Settings section at the bottom of the page and check the locations you wish this menu to appear in.

Once you've checked the desired locations, click Save Menu.

Dropdown menus

To achieve a dropdown menu with multiple levels, as illustrated above, simply drag a menu item in the Menu Structure section to the right for it to become a submenu of the menu item above it. A menu item can be dragged to the right of a submenu item to become a submenu of a submenu, achieving a multi-level dropdown menu.

Mega menus

There are several steps to achieving a mega menu. First, click the Screen Options tab located at the top of the Menu page, and check the CSS Classes checkbox in the Show advanced menu properties section.

Next, in the Menu Structure section of the Menu page, click a parent menu item that you want to initiate the mega menu. You'll see this item expand and reveal various field, including the CSS Classes field. In this field type po-mega followed by either po-cols4 for a 4 column mega menu, po-cols3 for a 3 column mega menu or po-cols2 for a 2 column mega menu.

To start building the mega menu, first drag all the menu items you wish to be included in the mega menu to the right of the initiator menu item (with the po-mega class, represented by the Elements sub item in the illustration above). 

In this group of submenu items that make up the mega menu, the first level sub items are the column titles (represented by the Shop sub item in the illustration above). These should be custom links with blank URLs as they are just titles and don't link to anything.

Menu items can then be dragged to the right of each of the column title sub items to be placed within that particular column. These become second level sub items in the menu tree (represented by the Product Categories and Products - Attribute sub items in the illustration above).

If you wish to hide a column title from displaying in the mega menu, type po-hide in its CSS Classes field. This will hide the title only and not the column. 

The best way to understand the mega menu implementation is to view the Elements menu item in the Top menu from the provided dummy content.

Powered by Pixelsmile