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. This is the default option but if you have altered it it can be located at Appearance > Customize > Mobile Menu > Toggle Button style.

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, you would change the Navigation Label to the icon class you want to display for that menu item. Please see the example below.

Mobile Icon Menu

You can find a list of the icon class names at FontAwesome (for the mobile icons menu you want to add just the name not the fa- part of the class as you can see in the screenshot above).

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.