Center primary menu

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;
    }
}

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.

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;
    }
}

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

Remove all of that CSS and add this:

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

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?

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);
}

Super David. Thanks!

-J

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

Hello there,

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

Sure, sorry!

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;
}

Perfect. Thanks!

You're welcome