[Resolved] Make Primary Nav Menu Items Fit Full Width And Adjust Size To Container Width

[Anthany]

Hi GeneratePress Support,

I was wondering if you know if it is possible to make primary menu items always fit the full width of the container: https://snipboard.io/XH1VuN.jpg , without starting a new line when screen size shrinks: https://snipboard.io/6Bl9HF.jpg ? Basically, make the menu items dynamically grow & shrink with the width of the container. Any ideas if this is possible?

Website URL: https://scuphed.com/

Thank you for your time, Anthany

[Fernando]

Hi Anthany,

It’s possible, but you would need multiple media Queries to make the menu items paddings and font-size smaller as the screen gets smaller.

For instance, if you add something like this in Appearance > Customize > Additional CSS, the font-size and padding of the menu items would decrease depending on the breakpoint:

@media (max-width: 908px) {
    #primary-menu > ul > li.menu-item > a {
        font-size: 12px;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 909px) and (max-width: 986px) {
    #primary-menu > ul > li.menu-item > a {
        font-size: 13px;
        padding-left: 25px;
        padding-right: 25px;
    }
}

@media (min-width: 987px) and (max-width: 1141px) {
    #primary-menu > ul > li.menu-item > a {
        font-size: 15px;
        padding-left: 25px;
        padding-right: 25px;
    }
}

You’ll just need to set the font-size and padding per breakpoint you want. You may add more if needed.

Hope this clarifies!

[Anthany]

Hi Fernando,

Ah yes, I figured this was the only way. Thank you very much for your help!

Kind regards, Anthany

[Fernando]

You’re welcome Anthany!

[Author]

Posts