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 {
    width:100%;
}

.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;
    font-size:80%;
    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 {
    font-size:80%;
}

.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]

Support Seb! Buy a funky T-shirt

Get a shirt

📌 More videos 📌 Better designs 📌 Next level Flatsome

💎 Get Seb's 22 Flatsome design essentials

Leave your email and get the free video link