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.

PLUGIN Shortcode in Menus

Shortcode in Menus

Bạn có thể quan tâm

Sửa lỗi "Loading UX Builder Load" ... "Denied by X-Frame-Options" của giao diện Flatsome

Thay đổi thông tin người gửi email mặc định trong WordPress

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

Shop now

Video tutorials & guides

We love Sale

Enjoy the latest deals

Shop the look

Inspired by the latest trends

Nguồn: https://www.sebdelaweb.com/flatsome-tutorial/custom-dropdown-menu-for-flatsome/