Docs

Mobile Menu Styles

  • Updated:

Total by default includes 2 different mobile menu styles to choose from. Below are the instructions for selecting your mobile menu style and also screenshots for examples of what they each look like.

Selecting Your Mobile Menu Style

To select your mobile menu style simply log into your WordPress dashboard then go to Appearance > Customize > Header > Mobile Menu. Here you will be able to select your preferred style from a dropdown.

total-mobile-menu

Disable Mobile Menu: Simply select the “Disabled” option to completely disable the mobile menu and instead display the default menu style on mobile devices. Please note that this may not look very good with certain header styles or if you have a lot of menu items, this is best used when you are using header style one and a few items. But can also be used if you wish to use a 3rd party mobile menu and then hide your default menu with CSS.

Sidebar Mobile Menu (sidr)

This is what the “Sidebar” mobile menu style looks like by default:

sidr-menu

Toggle Mobile Menu

This is what the “Toggle” mobile menu style looks like by default:

toggle-menu

Full Screen Overlay Mobile Menu

The Full-Screen overlay mobile menu is great for smaller menus and is more “modern”. You can choose between a light or dark version. Below is a screenshot example:

overlay-mobile-menu

Mobile Menu Toggle Styles (Changing the button you click to open the mobile menu)

Have a look at the following guide to learn about the Mobile Menu toggle styles and how to change them.

Back To Top