[Resolved] Center primary menu

[Salty Communication]

Hi!
I cant get my primary menu to get centered. I have gone through all the tricks I can find on the forum but I cant manage to get it work.
In the customizer -> layout -> primary menu I have no “Navigation Aligment”.

I have set up mega menu with the help of the GP Documentation. Maybe that has something to do with it?

All the best!

-Johan

[David]

Hi there,

the Alignment option would only be visible if the Navigation Location is set to Before or After the header.
When its Floated to the right, Centering is very subjective and requires CSS.

For example this CSS will center the navigation in the available space.

.nav-float-right #site-navigation {
    margin-right: auto;
}

So you have: Logo | equal space | Navigation | equal space

However if you want the navigation centered in the header, then you have to account for the logo takin up some space and add that same amount of space to the right of the nav

ie. Logo | equal space | Navigation | equal space + logo width

.nav-float-right #site-navigation {
    margin-right: auto;
}
@media(min-width: 1240px {
    .nav-float-right #site-navigation {
        padding-right: 210px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Salty Communication]

Thanks David! I got the menu centered, but the padding doesnt seem to work. Maybe it has something to do with the CSS for the mega menu?
I got this code red as well in the customizer:
.nav-float-right #site-navigation {

As you can see on the page the buttons right to the menu is very close to the menu. I want some padding between those. I tried to add padding to the widget itself, but then the menu got pushed to the left as well.

[Fernando]

Hello there,

Can you update the code above to this?:

.nav-float-right #site-navigation {
    margin-right: auto;
}
@media(min-width: 1240px) {
    .nav-float-right #site-navigation {
        padding-right: 210px;
    }
}

[Salty Communication]

Hi!
Perfect. Now it is centered. However, I need the buttons to be more aligned to the right. Any clues how to fix that?

[David]

Remove all of that CSS and add this:

#site-navigation {
    flex: 1;
}
.main-navigation .menu-bar-items,
.main-navigation .main-nav{
    margin-left: auto;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Salty Communication]

Perfect! It is now centered. The mega menu got pretty huge though. How do I size the mega-menu when hovering over the menu?
Is there a way to add a box shadow to the open mega-menu as well?

[David]

Try this CSS:

#primary-menu {
    position: relative;
}
nav .main-nav .mega-menu > ul {
    box-shadow: 0 9px 6px 3px rgba(0,0,0,0.2);
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Salty Communication]

Super David. Thanks!

-J

[Salty Communication]

Sorry to open this one up again.
But how do I get the menu to get centered on the sticky menu as well on desktop?

-J

[Fernando]

Hello there,

Can you re-share the link to the site in question?

[Salty Communication]

Sure, sorry!

[David]

Change this CSS:

.main-navigation .menu-bar-items,
.main-navigation .main-nav{
    margin-left: auto;
}

to:

.main-navigation .menu-bar-items,
.main-navigation .main-nav{
    margin-left: auto !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Salty Communication]

Perfect. Thanks!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts