Creating A Mobile Icons Menu

IMPORTANT: You MUST be using the using the “Right Aligned Icon Buttons” or the “Under The Logo Icon Buttons” toggle button style for your mobile menu for this to work.

total-icons-mobile-menu

The mobile icons menu works a bit differently. To create your mobile menu you need to create a new menu then instead of adding the names of your pages such as Portfolio, Blog, Contact…etc, your Navigation Label will be the theme icon name you want to display for that menu item. Please see example below:

Mobile Icon Menu

Accessibility Tip: You can use the “Title” attribute for your links (enable under Screen Options) and it will be added with the icon for screen readers.

Icons List: You can find a list of all the available theme icons here.

Sample Mobile Icons Menu

Below is an example of what the icons menu may look like:

Adding A Cart/Shop Icon

The Total theme has the ability to display a counter for the cart items on a mobile menu icon. The way it works is if you use any of the following class names for the label “shopping-cart, shopping-basket or shopping-bag” it will automatically display a little counter for the number of items in the cart:

Adding A Search Dropdown Icon

You can also add a search icon to the mobile icons menu (since Total 4.3). Simply add “search” in the label for a custom link and use # for the URL. This item will then display whatever search style you have set for the header (dropdown, overlay, header replace).

How to Display Mobile Icons Menu on Small Phones?

By default the mobile menu icons don’t display on small mobile devices to leave more room for the logo. However you can use a little CSS to display them always. Please see the snippet here.