Main menu

The theme supports custom WordPress menus, with multiple levels of drop down for the main menu.

To create a new Main Menu:

  1. Go to your WordPress Dashboard > Appearance > Menus
  2. Select the link Create a New Menu
  3. Write a name for your menu
  4. Press Create Menu button

2015-06-15_13-22-37

To customize your new Main Menu:

  1. Start to add menu items from the left panels (Homepages, Pages, Links, Categories)
  2. You can manage your menus by using the drag and drop functionality and rearrange the menu items in the desired order.
    After setting up your menu, scroll down to the bottom of the page and assign the menu to one of the 3 Theme Locations at the bottom. Select Header Main for Main Menu.
  3. Click the Save Menu button

2015-06-15_13-38-31

Using a Cloud Library template

Using the new Cloud Library Header Manger you can have an unlimited number of menus with lots of customization options.

Adding a menu to your header is simple.

Step 1: Import or edit an existing cloud library header template

Step 2: Drag the header menu elements to your header zone

 

Step 3: Set it up using the settings offered by the tagDiv Composer

 

  • The main menu settings allow you to select the menu you want to add to the page providing a list of all the menus you created in the wordpress menus area.
  • The first 3 options are for preview only allowing you to see a preview of the submenus and mega menus in the composer directly.
  • Under the main menu section of the settings, you can select the width of your menu in % or in pixels. The header manager allows different settings for each device in particular so a fixed width on the desktop menu will not influence responsiveness.
  • You also have the option to show the menu inline with other elements and you can also select to drop the menu items that do not fit the screen into a “more” dropdown menu item.
  • Also, you can align the menu to the right or to the left, you can choose the spacing, you can add submenu icons, a separator and choose the more text and icon.

There is also a submenu settings group allowing you to set the width, position, padding, alignment and icons for the standard submenus

 

The Style tab holds all of the general styling settings for colors and fonts for all the different sections of the menu allowing you unlimited styling options to create the perfect menu.

 

If you choose not to use the Header Manager and use the default menu instead, read the  section below:

Default Header Menu (Main):

This option allows you to load a menu created earlier as the main menu. With this function, you can also choose to display a menu for the footer or the top bar.

Sticky Menu:

This option gives you the freedom to decide how to display the header menu on scroll.

  • Normal menu – This is a non-sticky one. Choosing this will make your main menu stay fixed in the top section of your website and will disappear from the viewport when you scroll down the pages.
  • Always sticky – This option makes your menu sticky on your website. Even when you scroll down the pages, the main menu will always stay on the top section of your viewport.
  • Smart snap (mobile) – This option defines the behavior of your main menu on the mobile and retina ready devices. If you choose this option the sticky menu hides on mobile devices when you scroll down and it shows up when you scroll up.
  • Smart snap (always) – This option defines the behavior of your main menu on the desktop and the mobile and retina ready devices. Choosing this option the sticky menu hides when you scroll down and it shows up when you scroll up, extending the viewport for a better user experience.

Logo on sticky menu:

You can decide if you need a logo to be loaded on the sticky menu and how should it behave in different environments.

  • Disabled
  • Header logo – Click this option and on your sticky menu will be loaded the header logo
  • Mobile logo – This option allows you to add to your sticky menu a mobile logo. Notice: You can use this option only if earlier you uploaded a mobile logo (Theme panel – Header – Logo for mobile).

After you finished customizing this section click the Save Settings button.