Navigation Menus

Appearance > Menus
or
Appearance > Customize > Menus

The Retail theme has two menu locations (menus can also be added to any of the widget areas with the ‘Navigation Menu’ widget), Primary Menu and Footer menu.

Menu locations

Primary Menu

Located in the header either above or below the site logo area.

If you have not set your own menu as the primary menu, this menu will display either;

  • if you have not activated the WooCommerce plugin: your pages in alphabetical order
  • if you have activated the WooCommerce plugin: your product categories in the same order as arranged in Products > Categories

With this menu, level 2 items are arranged in four columns below the parent level 1 item. Level 3+ items are arranged in the level 2 column below each level 2 item.

The primary menu also supports two CSS classes, 'highlight' and 'more'.
The ‘highlight’ class renders the menu item in the theme’s Highlight Color.
The ‘more’ class also renders the menu item in the theme’s Highlight Color, and also displays the item in UPPERCASE and with the right chevron icon – .

Editing the primary menu

The primary menu live on the site

Footer Menu

Located in the footer to the right of the theme information section.

The footer menu accepts social media and email or RSS links and will automatically display the relevant social media icon (or email/RSS icon) in place of the link text if a link with the correct format is detected.

To add an icon linked to your social media profiles, add the menu item as a ‘Custom Link’ and add the URL to the URL text box. The ‘Link Text’ can be any text for your own reference as this will be converted to the relevant icon.

The links which are converted automatically to icons are;

  • facebook.com
  • twitter.com
  • plus.google.com
  • instagram.com
  • linkedin.com
  • youtube.com
  • codepen.io
  • github.com
  • gitlab.com
  • mailto: (an email link containing ‘mailto:’ markup)
  • /feed/ (a link to a RSS feed for example, containing ‘/feed/’ anywhere within the URL)
  • tel: (telephone number links containing ‘tel:’ markup will have the telephone icon before the phone number, with the number still visible)

Footer menu editing

Footer menu on the live site