Site logo

Archived topic

Questions regarding Simple Mega Menu

3 replies · Started by Mirko on August 12, 2021

Viewing posts 1–4 of 4

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 :)

This archived topic is closed to new replies.