Support » Theme: Customizr » Avoid wrapping of menu items

  • Hi, I would like my menu items in the navbar to remain on one line, without wrapping. Is there a way to achieve this with CSS? Or does it compromise the responsiveness? I’ve checked this topic in Snippets but Dave points the OPs back to the forum. I’ve searched the forum but couldn’t find a related post. Many thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Did you see this Snippet?

    Yes Dave, that’s the one I read, but you posted at the bottom: “I’d suggest the Forum would be a better place to get a solution for this. You’ll get a much wider audience. This isn’t my code, and I’ve not used it before.”

    The code supplied appeared to to prevent multiple words within the same menu item from wrapping but did not prevent the whole line of items dropping down to two.

    I added this to my child theme but it didn’t stop the menu items from wrapping.

    /* Prevent word-wrap */
    .navbar .nav li {
    white-space: nowrap;

    Any further suggestions would be appreciated.
    Many thanks

    Take a look at this Snippet.

    It was crafted by @acub, my mentor and friend. He helped me resolve how to get all my menu items centered, regardless of how many there were (within reason).

    This Snippet includes an extract from an email he sent me that explained how to do it. Section 4 may well help you achieve what I think you want.

    Let me know.


    I tweaked Section 4 to:

    .navbar .nav {float: none; width: 1000px; text-align: left;}
    .navbar .nav > li {float: none; display: inline-block;}

    Many thanks Dave!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Avoid wrapping of menu items’ is closed to new replies.