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

[Scott]

I’m trying to line up the main menu on either side with the content area and there is some extra padding. I do have some extra css that adds a tab effect but removing it doesn’t fill the same width as the what the content area is specified as which is 960px. Staging url added to the Private Information.

Screenshot. So how do I get the menu to be exactly the same width as the content ?

Thanks as always for the fantastic support!

[Ying]

Hi Scott,

Try this CSS:

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

[Scott]

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!

[Ying]

Try add this CSS as well:

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

[Scott]

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 !

[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 🙂

[Scott]

That works fantastically 🙂 🙂

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

[David]

Hi there,

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

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

[Scott]

Yep it was required.

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

[David]

Glad we could be of help

[Author]

Posts