Mobile Icons Menu

The mobile icons menu in the Total theme works differently from standard menus. Rather than showing text labels like Portfolio, Blog, or Contact, each menu item is represented by an icon.

To set up your mobile icons menu:

1. Create a new menu in Appearance → Menus.
2. For each menu item, either:
   • Enter the theme icon name in the Navigation Label field, or
   • Select an icon using the Menu Icon field (this option isn’t available in the Customizer).
3. Assign this menu to the Mobile Icons menu location.

This setup allows you to create a fully icon-based navigation experience for mobile devices, like such:

Accessibility Tip: You can use the “Title” attribute for your links (enable under the Screen Options tab) 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 if you are adding the icon name manually via the Label field.

Adding a Cart/Shop Icon

The theme can display a counter for cart items on a mobile menu icon and also open the shopping cart. For an icon to be recognized as a cart icon, all of the following conditions must be met:

1. WooCommerce is enabled and Advanced Integration is activated in the Theme Panel.
2. The selected icon either:
   • Starts with shopping-, or
   • Contains the word cart, or
   • Has a link URL set to #cart.

Adding a Search Icon

The theme can display a search toggle in the mobile icons menu and open the header search as defined in the Customizer under Header > Search. For an icon to be recognized as a search icon, it must meet one of the following conditions:

• The link URL is #search, or
• The selected icon contains the word search.

Adding a Dark Mode Toggle Icon

The theme can display a dark mode toggle button icon that will switch between light and dark modes. For an icon to be recognized as a dark mode toggle, it must meet the following condition:

• Dark Mode is enabled in the Theme Panel.
• The link URL is #dark-mode.