Jetmenu Mega Menu in Sydney squeezed


#1

Hi there,
Maybe you can help me with this behaviour.
I use JetMenu and Elementor to do a MegaMenu in Sydney. But when I’m done, the MegaMenu only has the width of the MainMenu and not the whole navigation bar.
Sydney Movie
How can I fix this?
If I take the Cali theme for example, it works:
Cali Movie

If you want to test it yourself, here is the link to the test-site:
Testsite

Thanks for solving the issue
Markus


#2

Hello,

You should be able to overcome this with css code below, which will widen drop down to the width of first level menu holder width:

.jet-desktop-menu-active .jet-sub-mega-menu {
    width: inherit;
    
}

and it should look like this https://www.screencast.com/t/iUzwUxjX

But also you can set it to be full screen width with code below:

.jet-desktop-menu-active .jet-sub-mega-menu {
    width: 100vw;
    left: initial;
    right: -100%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}

and result should look like this https://www.screencast.com/t/YzTdSqvLaQ

You can apply the code from Appereance > Customize > Additional CSS.

Best Regards!


#3

Thanks, that’s a start, will try that.
I just saw, that it is working perfectly with tablet or mobile view ( the one with the “hamburger”)


#4

The first one with “inherit” width is still not exactly the way it should look like… but the hamburger menu is fine.
Another suggestion?


#5

Hi again,

Only solution to have it in grid width is to set fixed width like this:

.jet-desktop-menu-active .jet-sub-mega-menu {
    width: 1170px;
    left: 0;
    -webkit-transform: translateX(30%);
    -ms-transform: translateX(30%);
    transform: translateX(-30%);
}

but you will need to set media rules for smaller screens and to reduce width - helpful reading https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ . If it is not clear how to do this then I suggest using full width solution or to try with inherit but to reduce font sizes for the content.

All the Best!


#6

Sorry, I just thought there is something wrong with “Sydney” (+Pro) because in all other themes from athemes I don’t have these problems… (well I tested 5 other themes so far)


#7

Hi again,

Plugin which you are using is very good, but plugin authors can’t predict every possible scenario, in this case width and structure of the menu, so it really can’t be a theme issue, but I hope that provided code helped you, and that you managed to overcome this issue. Off course, you can always contact plugin author for additional support since they might have better solution since they know their product much better and they are familiar with potential problems.

All the Best!


#8

Thank you Dimikjones