Learn how to use the UX Builder to fully customise your Flatsome dropdown menu. Organise your link hierarchy and improve the general user experience.
PLUGIN Shortcode in Menus
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;
}
UX SHORT CODE
[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]
Nguồn: https://www.sebdelaweb.com/flatsome-tutorial/custom-dropdown-menu-for-flatsome/