Is it possible to widen the navigation menu, the part with menu items?

  • Resolved boppar

    (@boppar)


    2 years, 11 months ago

    Hello!
    I want to use larger fonts on the texts in my menu items in the navigation bar. However when I enlarge the fonts the navigation menu turns into 2 rows. Looks weird.

    Because of this I want the are with the navigation menu items to be a bit wider but I don’t succeed. Is there a CSS code I can add to achieve this?

    Images to explain:
    Now it looks like:
    https://ibb.co/HVkH8Mn
    I want it to look something like (but I’m gonna use larger fonts):
    https://ibb.co/HVJ7hWw

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi there!

    Thanks for contacting us.

    I understand you want to increase the font size of the menu items but as you do that, the items start appearing in the next line.

    First, you could increase the overall size of the menu container:

    
.storefront-primary-navigation .col-full{
max-width:1300px;
}

    Then, to add spacing between items, you could modify this CSS that you’ve already added: (Change the 1em to 1.2em or what you prefer.)

    
.storefront-primary-navigation ul li a {
  padding: .5em 1em !important;
}

    As you have quite a few menu items compared to the available space, I’m not sure if larger fonts will work.

    I hope this helps! ??

    Thread Starter boppar

    (@boppar)

    Hi @kaushiksomaiya
    As usual you made an excellent solution. Now it’s working just like I want.
    Thanks a lot!!

    Glad that we were able to help you out! Feel free to get back to us in case you have any additional questions!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Is it possible to widen the navigation menu, the part with menu items?’ is closed to new replies.