Archived topic
Questions regarding Simple Mega Menu
3 replies · Started by Mirko on August 12, 2021
Hello,
trying to modify your simple mega menu a bit so it fit's to my Site.
I have problems with the menus "Europe" & "Sonstiges". I have a lot of sub-menu's behind those and I'd like to split them in 3 columns but I'd like to have it not 100% width, so i reduced it down to 60% but then the sub-menu's were all attached to the left site of the screen.. so I tried to change left 0 to left: 150px which actually works for "Europe" but when you move to "Sonstiges" the sub-menus are showing up under "Europe", too.. which is not good :(
So basically I'd like to have the sub-menu's showing up centered to the parent's menu
can you help me please?
Hi Mirko,
You can give this CSS a try:
@media (min-width: 769px) {
/*Europa*/
nav .main-nav li.mega-menu#menu-item-454 > ul {
left: 150px !important;
}
/*Sonstiges*/
nav .main-nav li.mega-menu#menu-item-595 > ul {
left: unset !important;
right: 150px;
}
}
For the Sonstiges sub-menu, the CSS I provided is to locate it from the right side, so when the screen shrinks, it won't overflow.
Let me know if this helps :)
Hey,
thanks a lot, probably by far not the most elegant solution (I mean my Navbar in general) :), but still learning..
your solution is very helpfully and good working
thanks
You are welcome Mirko :)