WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Avoid wrapping of menu items (5 posts)

  1. memecoughlin
    Member
    Posted 7 months ago #

    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.

  2. rdellconsulting
    Member
    Posted 7 months ago #

    Did you see this Snippet?

  3. memecoughlin
    Member
    Posted 7 months ago #

    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

  4. rdellconsulting
    Member
    Posted 7 months ago #

    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.

  5. memecoughlin
    Member
    Posted 7 months ago #

    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!

Reply

You must log in to post.

About this Theme

About this Topic

Tags