Create a Custom Dropdown with Flatsome Theme

Learn how to make a fully customizable dropdown menu in Flatsome using the UX Builder! This guide will walk you through setting it up, using a plugin, and adding CSS for a pro look.

Step-by-Step Tutorial

1. Install the Necessary Plugin

First, install the Shortcodes in Menus plugin.
Go to your WordPress dashboard and select Plugins > Add New.
Search for “Shortcodes in Menus” and install the plugin created by Kagan Deep Singh.
Once installed, click Activate to enable it.

2. Add Custom CSS

To style the dropdown menu, you’ll need to add some custom CSS.
Copy the provided CSS code (which includes code to set the dropdown width).
Go to Appearance > Theme Editor and paste the CSS code there. Then, update the file.
The first part of this code will set the width of your dropdown. You can adjust it for a standard width (e.g., 600px) or a full-width mega menu.

Navigate to UX Blocks > Add New.
Paste in the provided UX shortcode and give your UX Block a descriptive name like “UX Menu Call-Out.”
Publish this block, then copy the shortcode generated on the right side.

Head to Appearance > Menus and add the UX Block as a dropdown menu item.
You’ll see a new section called Shortcode (if it’s not visible, check Screen Options and enable Shortcodes).
Paste in your shortcode and add it as a submenu under an existing menu item, like “Shop.” Save your changes.

5. Assign CSS Class to Parent Link

To control the dropdown’s appearance, add a CSS class to the parent link.
In Appearance > Menus, find the parent menu item (e.g., “Shop”) and assign it the CSS class UX Menu or UX Mega Menu depending on your layout preference.
If you don’t see the CSS class option, check Screen Options and enable CSS Classes.
Save your menu changes.

6. Preview and Adjust

Visit your website to see the new dropdown in action.
Refresh the page to apply changes, and adjust the CSS width if you’d like a full-width mega menu style.

7. Further Customization with UX Builder

Open the UX Block in UX Builder to edit the layout. Here, you can add icon boxes, widgets, and customize colors and padding.
For multi-column dropdowns, you can add additional content blocks and widgets.
To add widgets, go to Appearance > Widgets and create a custom sidebar with navigation links or other items.

Tips for Advanced Customization

For deeper menu layers, you can modify the CSS or add further shortcodes.
Experiment with different icon settings and widget areas to create the perfect multi-column dropdown layout.

That’s it! You’ve now created a sleek, customizable dropdown menu in Flatsome. By combining the Shortcodes in Menus plugin with custom CSS and UX Blocks, you have full control over the layout, appearance, and behavior of your dropdowns.

Experiment with the UX Builder to personalize your menu’s design and create a navigation experience that fits your site perfectly. If you have any questions or ideas, feel free to ask in the comments, and don’t forget to follow along for more tips on mastering Flatsome!

Continue learning