WordPress Menus

UnderStrap supports only a primary menu with two levels, means just a single submenu level.

Adding Icons to the Menu

If you want to prepend an icon to any of your menu items, you can use any of FontAwesome 4.7´s icons that come along with UnderStrap. To get an overview of all FontAwesome icons that ship with UnderStrap have a look at their 675 icons.

As you can see in the image above you can add custom classes (e.g. fa fa-home) to any menu item.{ .mb-5}

Adding Social Media Icons and hiding the text from non visually impaired users

If you want to add social media icons for example but respect WCAG 2.0 guidelines you´ll need to provide some assistive text for visually impaired users. But most problably you´ll not want to show it to non visually impaired users.

This will render the following HTML:

<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1713" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1713 nav-item">
  <a title="Visit us on Github" href="https://github.com/understrap" class="nav-link">
    <i class="fa fa-github" aria-hidden="true"></i>
    <span class="sr-only">Visit us on Github</span>
  </a>
</li>

As you can see the icon will get automatically hidden for visually impaired users by the aria-hidden="true" attribute while the text will get wrapped by a <span class="sr-only"> which will only be “shown” to screenreaders.

Adding more Menus

If you want to add more menus please see Extend » Custom Menus and Menu Areas.