Archived topic
Create mega menu with spec
5 replies · Started by alexis on May 11, 2022
Viewing posts 1–6 of 6
Hello,
Is it possible to make the mega menu like on this model? I managed to make the mega menu but what is more difficult is to have the 2 columns and on the left the text "Services" in pink.
How can I do this please?
Hi Alexis,
Try this:
@media (min-width: 1025px) {
.main-navigation .main-nav > ul > li#menu-item-359.mega-menu> ul {
display: grid;
grid-template-columns: auto repeat(3,300px) auto;
grid-template-rows: auto auto;
align-items: center;
}
.main-navigation .main-nav > ul > li#menu-item-359.mega-menu> ul >li:nth-child(1) {
grid-column: 2/3;
grid-row: 1/3;
color: pink;
}
.main-navigation .main-nav > ul > li#menu-item-359.mega-menu> ul >li:nth-child(2) {
grid-column: 3/4;
}
.main-navigation .main-nav > ul > li#menu-item-359.mega-menu> ul >li:nth-child(3) {
grid-column: 4/5;
}
.main-navigation .main-nav > ul > li#menu-item-359.mega-menu> ul >li:nth-child(4) {
grid-column: 3/4;
}
nav .main-nav > ul >li#menu-item-359.mega-menu>ul>li {
width:100%;
}
}Thank you very much. There is just a bug in the hover on the mega menu because I need to add a margin or translate Y. But the menu will disappear. Do you have a solution ?
Try add this CSS under the same media query @media (min-width: 1025px) {
.main-navigation .main-nav > ul > li#menu-item-359.mega-menu a:after {
content: "";
position: absolute;
top: 100%;
bottom: -50px;
left: 0;
right: 0;
}Top than you Ying
Glad it works and glad to help!
This archived topic is closed to new replies.
