Nếu bạn đã làm với Flatsome thì sẽ biết menu có 2 cấp con trong flatsome sẽ ở dạng ngang. Hôm nay mình sẽ chia sẻ css để cho nó về dạng dọc bình thường nhé
Rất đơn giản, bạn chỉ cần thêm css sau vào menu Flatsome > Advanced > Custom CSS > ALL SCREENS
/*
Css menu đa cấp cho Flatsome
Author: levantoan.com
*/
@media (min-width: 850px){
header#header .nav-dropdown {
display: block;
}
header#header .nav-dropdown ul.sub-menu {
position: absolute;
left: 100%;
top: 0;
background: #fff;
width: 250px;
padding: 0;
display: none !important;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
}
header#header .nav-dropdown ul.sub-menu a {
white-space: normal;
margin: 0;
padding: 10px 15px;
border: 0;
font-weight: 400;
}
header#header .nav-dropdown li:hover > ul.sub-menu{
display: block !important;
}
header#header .nav-dropdown li {
border-right: 0;
white-space: normal;
width: 100%;
display: block;
position: relative;
}
header#header .nav-dropdown li.menu-item-has-children > a {
font-weight: 400;
text-transform: none;
color: rgba(102,102,102,.85);
}
header#header .nav-dropdown li.active>a {
color: #e82c2a;
}
}
Chúc các bạn thành công!
- Bình luận
