Hướng dẫn tạo mega menu trên Flatsome

image

Dùng UX Builder để làm Dropdown Menu trong them Flatsome trước tiên bạn cần cài đặt 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 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="/flatsome-assets/"]

<h4>Shop now</h4>
<p>Video tutorials & guides </p>

[/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="/flatsome-custom-styling/"]

<h4>We love Sale</h4>
<p> Enjoy the latest deals</p>

[/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="/sebs-showcase-with-flatsome-website-examples/"]

<h4>Shop the look</h4>
<p> Inspired by the latest trends</p>

[/featured_box]

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

[ux_sidebar]


[/col]

[/row]

Bài viết gốc:
https://www.sebdelaweb.com/custom-dropdown-menu-with-flatsome-ux-builder/

Chúc các bạn thành công !

hay quá bác :smiley:

1 Like

tks ad