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

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

Home Forums Support Make Primary Nav Menu Items Fit Full Width And Adjust Size To Container Width

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2262845
    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

    #2262864
    Fernando
    Customer Support

    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!

    #2262880
    Anthany

    Hi Fernando,

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

    Kind regards, Anthany

    #2262884
    Fernando
    Customer Support

    You’re welcome Anthany!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.