[Resolved] Navigation doesn’t stretch along the width of the container.

[qpaq]

Hi,

I’d like to make navigation menu items to be stretched within the container with spaces in between. The current settings can only justify them to the right or left of the navigation area or justify them to the centre. I couldn’t find a way to correct this with custom CSS.

My current settings:
Customizing ▸ Layout > Primary Navigation >
Navigation Width: Full
Inner Navigation Width: Full
Navigation Alignment: Center
Navigation Location: Below Header

website link is below:

[Ying]

Hi there,

Your site is under maintenance mode, can you disable that for now so we can see your site?

[qpaq]

Sorry, forgot that one. Now turned it off.

[Ying]

Try this CSS:

@media(min-width:769px){
div#primary-menu {
    flex-grow: 4;
}

div#primary-menu > ul {
    display: flex;
    justify-content: space-between;
}

.menu-bar-items {
    flex-grow: 1;
    justify-content: flex-end;
}
}

[qpaq]

Works very well, thank you, Ying!

[Ying]

No Problem, glad to help 🙂

[Author]

Posts