Top & Footer Menu Settings

1. To create a new Main Menu go to:

This tutorial demonstrates how to create a custom menu in WordPress and how to create a menu structure.:

  1. Go to your WordPress Dashboard > Appearance > Menus
  2. Click on the “create a new menu” link.
  3. Write a name for you menu.
  4. Press Create Menu button.

2. To customize your new 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 Top / Footer Bar Navigation same thing you see in the photo from the below.
  3. Click the Save Menu button.

3. Adding a font Icon to the 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 Top / Footer Bar Navigation same thing you see in the photo from the below.
  3. To add a font ICON: select a menu that you want to edit and paste the icon code in a menu item, then save the menu. To preview all available Font Awesome icons go to http://fortawesome.github.io/Font-Awesome/icons/.
  4. Click the Save Menu button.

4. Adding languages links with opacity style (ES & FR):

  • Click on the “Screen Options” link.
  • Check “CSS Classes”.
  • Click on the “Custom Links” and create a custom link, with any Link Text, as you can see from the bellow photo, and click “Add to Menu”.
  • Then add the class “lang“, to the CSS Class field, as you can see from the bellow photo, and click “Save Menu”, and that’s it.
    PS: with the lang class, the label menu will be blurry as you can see from the demo and screenshots. The blurry style will give the information that the blurry label ( the language in this case ) is inactive.
Was this page helpful?
Yes No