How to Set Up Vertical Menus and Mobile Tab Menus in Flatsome: The Complete Guide

Flatsome The latest version introduces some exciting new features including Vertical menu header elements respond in singing Tabbed Mobile Overlay Menu. These features are especially useful for large e-commerce sites, easier to navigate ways to organize and present content, especially on mobile devices. This tutorial will take you step-by-step through setting up vertical menus and mobile tabbed menus to enhance the user's navigation experience.

Why do I need a vertical menu and a mobile tab menu?

Setting up vertical menus and mobile tabbed menus can help e-commerce sites provide a more intuitive, clean and efficient navigation experience, enhancing the site'sSEO performance, brand consistency and responsiveness. These menus not only optimize the desktop and mobile access experience, but also enhance the overall professional feel of the site. Setting up both menus is essential for e-commerce sites with a large number of products or content.

Step 1: Add vertical menu header element

Access to header settings

Follow the steps below to access and set up the vertical menu:

• In the WordPress backend, go to Flatsome > HeadThe

• commander-in-chief (military) vertical menu element is dragged into your header layout.

• Click the Settings icon next to the vertical menu element to open the menu's customization options.

Customize Vertical Menu

exist Vertical menu options The following settings can be adjusted in the

• Icon size: Resize the vertical menu icons.

• Button height and width: Change the height and width of the button.

• copies: You can choose whether to show the categories by default, or have them show up only when clicked.

• Text color and background: You can customize the text color (e.g. black text on a white background, or white text on a black background) and set the vertical menu for thebackground colorThe

Pop-up menu options

It is also possible to enable pop-up menu, which allows vertical menus to expand automatically on the home page. This approach may not work in design and it is usually recommended to leave it unchecked. It can remain unchecked for now.

Step 2: Setting the Menu Category

• go into Appearance > MenuThe

• Create a new menu and check the vertical menu Options.

• Add categories and links that are displayed in the vertical menu.

• Make sure the menu items are in the order you want them.

Step 3: Setting up the Mobile Tab Menu

Enable Tab Menu

The latest version of Flatsome adds Tabbed Mobile Overlay Menu Features. It's perfect for enhancing the navigation experience on mobile. The method to enable it is as follows:

• switch to Flatsome > Theme Options > Header > MoveThe
• Scroll down to tab (of a window) (computing) section, select 2 tagsThe

• Customize the label text. For example, you can change "Menu" to "Main Menu" or "Category".

• Set the label to show your vertical menu, so that users can easily access all categories on mobile.

test effect

You can see that you have successfully completed setting up the vertical menu and mobile tab menu, just need to enrich the menu categories and content.

summarize

By setting up vertical menus and mobile tabbed menus, e-commerce sites can not only enhance the user experience on both desktop and mobile, but also make the site easier to navigate and more responsive, especially for e-commerce platforms with a wide range of products. With these new features of Flatsome, website content can be organized and presented more efficiently, thus increasing users' dwell time and desire to buy.

For more WordPress related tutorials and information, follow thePhoton fluctuation network, has the most comprehensive WordPress tutorials and the most activeWordPress Exchange CommunityThe

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off