[Resolved] Mega Menu Width

[Gary]

I know this question has probably been asked several times but I was wondering if there is a way to set the CSS mega menu so that the drop downs are the same as the page width instead of the menu width? It works fine with my sticky menu but not the main menu. My website URL is http://www.christtheteacher.ca/ctt/. Any CSS tweaks would be greatly appreciated.

Thanks,
Gary

[Leo]

Hi there,

Try activating this option:
https://docs.generatepress.com/article/navigation-as-a-header/

Let me know if this helps 🙂

[Gary]

Hi Leo,

I activated the “Use Navigation as Header” option and that resolved the problem with the width of the mega menu. Now my header background is “white” and the logo is too large after adjusting the header height. I can’t find the setting to change the header background. Do I need to create a new page header element to fix these problems?

Thanks,
Gary

[David]

Hi there,

The Navigation as Header – replaces the header with the Nav. So Customizer > Colors > Primary Navigation is where you can set them.

The logo is now defined by the Menu Item Height in Customizer > Layout > Primary Navigation. Reduce that to reduce the logo.

Or you can use this CSS to change its size independently:

.navigation-branding img {
    height: 60px;
}

[Gary]

Hi David,

Not sure how I missed the background color, thanks for pointing me in the right direction. I also used the CSS code to resize the logo and that worked great as well. Thank you so much for all the great support. I think I finally have my theme setup the way I wanted it. You guys rock when it comes to support!

Gary

[David]

Glad we could be of help

[crosby87]

Dear GeneratePress,

I have a similar question so instead of opening up a new topic, I’m posting it here.

Similarly to OP, I’d like to change the width of my megamenu to something similar like on this site: http://www.moneyunder30.com. Their megamenu is not the full width of their site, but there is empty space/padding on both sides. See here: https://imgur.com/Q5Sh3xD

Could you please help how I can customize the width of my website similarly?

I used the Navigation-as-a-header option suggested above by Leo, but the megamenu becomes full-width which I don’t want (I’d like to have spacing on both sides).

See picture: https://imgur.com/xmW0Mcu

If I tick off the Navigation-as-a-head option, then the width of the megamenu is not wide enough and my text does not fit.

[Elvin]

Hi @crosby87,

Can you open a new topic for this? So you can use the private information text field to sure more details.(site link/s, etc).

Thank you.

[Author]

Posts