Menu

 

Creating Menu

 

To set up menus for your site, go to Appearance   Menus. Next, give your menu a name and click Create Menu.

 

Create Menu

 

Now begin adding menu items to your menu. There are sections on the left-hand side that you can add menu items from. You can choose from pre-existing Pages, Posts, Categories, etc. You can also create custom links. Here’s how you would add a Page, for example.

 

Add Page

 

You will then see those Pages added to your menu. Posts, Categories, and other links work similarly. By drag & drop, you can rearrange the menu items, move items to be sub-items, etc - 1.

At the bottom of the menu, you’ll see an option to add top-level pages to the menu automatically - 2. That means that when you create a new page, it will automatically get inserted into your menu as a menu item.

Once you finish creating menu items you need to assign your menu to a location so it will be visible. At the bottom of the menu, you will see checkboxes for locations to place the menu - 3. Remember to click the Save Menu button when you’re done - 4.

 

Rearrange Menu

 

 

To customize the layout of your menu navigate to Appearance   Customize   Header   Menu.

 

Customize

 

Header

 

Header Menu

 

Menu Layout

 

 

  • Disable Main Menu
    • this option disables the main menu, temporarily hide the menu
  • Menu Item Hover Effect
    • defines the menu item hover effect of the menu
    • Menu Item Hover Effect
  • Menu Horizontal Alignment PREMIUM ONLY
    • controls the alignment of the menu items in the menu
    • Menu Horizontal Alignment
  • Padding Between Menu Items
    • controls the spacing between the menu items
    • Padding Between Menu Items
  • Main Menu Height
    • defines main menu height
    • Main Menu Height
  • Responsive Menu Layout
    • defines if the sub-items are automatically open or close in the mobile menu
    • Responsive Menu Layout

 

Styling Menu

 

To customize the design of your menu navigate to Appearance   Customize   Styling   Menu.

 

Customize

 

Styling

 

Menu

 

Styling Menu

 

 

  • Main Menu Color
    • controls the background color of the main menu
    • Main Menu Color
  • Disable Main Menu Background Gradient, Shadow, and Borders For Header #1
    • this option disables the background gradient style on Header #1
  • Text Shadow Effect Color
    • this option sets the text-shadow color of the menu items
    • Text Shadow Effect Color
  • Top Bar Color
    • controls the background color of the top bar on Header #2
    • Top Bar Color
  • Menu Hover Font Color
    • defines the text color of the menu items on hover/active state
    • Menu Hover Font Color

 

Video Tutorial

 

 Video Tutorial