Vertical Menu and Mobile Tabs in Flatsome Theme

Discover Flatsome’s newest features with version 3.15! Learn to set up the Vertical Menu and Mobile Tabbed Menu, both perfect for e-commerce sites with lots of product categories. This guide will help you make navigation easy and keep your store organized!

Step-by-Step Guide

1. Update Flatsome to Version 3.15

• Make sure you’ve downloaded and installed Flatsome 3.15 to access the new menu features.

2. Access Header Settings

• Go to your WordPress dashboard.
• Navigate to Flatsome > Header to open the header settings.

3. Add the Vertical Menu Element

• Within the header settings, locate the Vertical Menu element in the “New” section.
• Drag it into the desired position on your header layout.

4. Customize the Vertical Menu

• Click on the settings (gear icon) for the Vertical Menu to customize:
  • Icon: Add an icon if desired.
  • Size & Spacing: Adjust height and width to fit your design.
  • Text & Labeling: Customize the menu text (default is “Categories”).
  • Colors: Set the text color, background, and decide if it matches your primary color scheme.
• Flyout Options: Configure the flyout menu to show on hover or always appear on the front page, based on your preference.

5. Set Up Your Drop-Down Menu for Categories

• Go to Appearance > Menus in WordPress.
• Create or select a menu and ensure Vertical Menu is checked.
• Add any sub-categories or product categories you want in the drop-down for easy navigation.

6. Check Flatsome Documentation (Optional)

• For further tweaks, review Flatsome’s documentation on the Vertical Menu for additional insights.

7. Customize the Vertical Menu’s Display (Advanced)

• If needed, you can set a custom size in UX Builder to make the vertical menu match the width of your layout.
• Adjustments to make it fully responsive may require some custom CSS.

8. Enable Mobile Tabbed Menu

• Go to Flatsome > Theme Options > Header > Mobile.
• Scroll down to find the new Tabs option. Select Two Tabs to enable it.
• Customize the tabs to show different text or link to specific menus or categories:
  • Tab 1: Label this as “Main” or whatever suits your design.
  • Tab 2: Set this as your Vertical Menu for easy mobile access to categories.

9. Test & Finalize Your Layout

• Publish changes and preview your site to ensure that both the desktop and mobile menu layouts look and function as expected.
• Fine-tune any remaining style or size issues to make the navigation seamless for visitors.

With Flatsome 3.15’s new Vertical Menu and Mobile Tabbed Menu, you can significantly enhance navigation for your e-commerce site. These features make it easier for customers to find products, especially in stores with multiple categories. By following these steps, you’ve customized both desktop and mobile menus to create a streamlined shopping experience.

Explore the options and test the layout to find what works best for your store. Enjoy the new flexibility Flatsome offers, and watch your site’s usability and appeal improve!