How to make the primary menu exactly the same width as the content area?

Hi Scott,

Try this CSS:

#primary-menu {
    width: 100%;
}
#primary-menu ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

Ying;

Thank you so much for the quick response!

That's wasn't quite doing it.

If I set the primary-menu to 960px (the content width) instead of 100% it does work....but now the sub menu item layout is horizontal.

#primary-menu {
    width: 960px;
}
#primary-menu ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

So how do I reset the css for the sub menu items ?

Again, thank you so much!

Try add this CSS as well:

#primary-menu > ul > li.menu-item-has-children > ul {
    display: flex;
    flex-direction: column;
}

That stacks them vertically but the width is constrained to the main menu button width. Do I have to set the size in pixels or is there a way to use the customizer pixel value?

Thanks again for the fantastic support Ying !

You are welcome!

1. Change this CSS:

#primary-menu ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

To this:

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

2. Go to Customizing > Layout > Primary Navigation > Sub-Menu Width, adjust the value to find the best fit :)

That works fantastically :) :)

And I'll need to wrap all that menu specific css in a media query, correct?

Hi there,

it may not be required, but if it is then:

@media(min-width: 768px) {
    /* add styles here */
}

Yep it was required.

Thank you so much for the, as always, phenomenal support Ying and David!

Glad we could be of help