[Support request] Centre menu and Mega Menu

[Spencer]

Hi there,

I am trying to create a menu like the attached image (this is how far I have got) – https://drive.google.com/file/d/1FwmpLqJuZUv0ZdeZdsKNuLzNx3SfakzQ/view?usp=sharing

What I want to do is –
1) Centre the 3 menu items and leave the button and hamburger menu to the right
2) add the Mega Menu to the centred menu items.

I’m not sure if I should remove the Button which is a menu item and add a button via a hook? so that simplifies separating the menu?

also the width of the mega menu seems to be determined by the main menu, is it possible to make the mega menu full width?

Many thanks!

[Spencer]

Hi there,

Further to above – I have removed the button that was created as a menu item using CSS. Added the button back using a hook generate_inside_navigation and then used order : 1 etc to swap the button and hamburger icon around so it looks the same as the image but the button is now separate from the menu.

Now I just need to centre the Primary menu and make the mega menu full width.

Cheers!

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Spencer]

Hi Leo,

Yes, I have just deployed it from the local to the dev server – https://kh.medev.com.au

Thanks!

[David]

Hi there,

in the Simple Mega Menu CSS – the first rule in the @media query is:

nav .main-nav .mega-menu {
    position: static;
}

Replace that with:

nav .main-nav .mega-menu,
.inside-navigation {
    position: static;
}

.inside-header {
    position: relative;
}

.nav-float-right #site-navigation,
.main-navigation .inside-navigation {
    flex: 1;
}

.main-navigation .main-nav {
    margin: auto;
}

[Spencer]

Hi David,

Thank you, that worked a treat.

Cheers!

[David]

Glad to hear that!

[Author]

Posts