WordPress.org

Support

Support » Themes and Templates » Customizr » Avoid wrapping of menu items

Avoid wrapping of menu items

  • memecoughlin

    @memecoughlin

    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)
  • rdellconsulting

    @rdellconsulting

    Did you see this Snippet?

    memecoughlin

    @memecoughlin

    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

    rdellconsulting

    @rdellconsulting

    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.

    memecoughlin

    @memecoughlin

    Brilliant!

    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.
Skip to toolbar