Flatsome tutorial

Custom Dropdown Menu for Flatsome

Learn how to use the UX Builder to fully customise your Flatsome dropdown menu. Organise your link hierarchy and improve the general user experience.

1. CSS

/*************** UX MENU ***************/

.ux-menu .nav-dropdown {
    min-width: 600px;
    padding: 0px;

.ux-megamenu .nav-dropdown {
    min-width: 100vw;
    padding: 0px;

.ux-megamenu li.menu-item {

.container .ux-megamenu .row:not(.row-collapse) {
    margin-left: auto;
    margin-right: auto;

/*************** UX MENU - CALLOUT  ***************/

.ux-menu-callout a {
    color:#000; /* Change nav color */

.ux-menu-callout a:hover, .ux-menu-callout a:hover h4   {
    color:#000; /* Change nav hover color */

.ux-menu-callout .icon-box .has-icon-bg .icon .icon-inner {
    background-color: currentColor; /* Auto fill background with icon color */

.ux-menu-callout .nav-dropdown .menu-item-has-children>a {
    text-transform: none; /* Text transform parent links */
    font-size: 100%;

.ux-menu-callout span.widget-title {
    text-transform: uppercase;
    letter-spacing: .05em;
	opacity: 0.8;

.ux-menu-callout ul.menu>li ul {
    border-left: 0px;
    padding: 0px 0px 10px 10px;

.ux-menu-callout .icon-box-text {
    padding-top: 5px;

.ux-menu-callout h4 {
    margin-bottom: 0px;

.ux-menu-callout p {

.ux-menu-callout .widget .is-divider {
    margin: 5px 0px;
	opacity: 0;

.ux-menu-callout .widget {
    margin-bottom: 0px;

2. UX Shortcode

[row label="CSS* UX Menu: Callout" style="collapse" v_align="equal" padding="20px 20px 20px 20px" class="ux-menu-callout"]

[col span="7" span__sm="12" span__md="12"]

[featured_box img="https://www.sebdelaweb.com/wp-content/uploads/bag.png" pos="left" margin="0px 0px 30px 0px" icon_border="4" icon_color="rgb(229, 206, 143)" link="#"]

Shop now

Video tutorials & guides

[/featured_box] [featured_box img="https://www.sebdelaweb.com/wp-content/uploads/percentage.png" pos="left" margin="0px 0px 30px 0px" icon_border="4" icon_color="rgb(180, 105, 106)" link="#"]

We love Sale

Enjoy the latest deals

[/featured_box] [featured_box img="https://www.sebdelaweb.com/wp-content/uploads/fashion.png" pos="left" margin="0px 0px 20px 0px" icon_border="4" icon_color="rgb(34, 39, 74)" link="#"]

Shop the look

Inspired by the latest trends

[/featured_box] [/col] [col span="5" span__sm="12" span__md="12" bg_color="rgb(250, 250, 250)"] [ux_sidebar] [/col] [/row]

Need professional design help?

Let's take your Flatsome shop to the next level.

Seb's design service

💎 Improve your Flatsome design in 30 minutes

Get 22 design tips that every Flatsome site could use.