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.
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:
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.
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.