Grow your CSS skills. Land your dream job.

li media query line break

  • # October 17, 2012 at 10:55 am

    I have a navigation menu that is 7 items built with li’s and I want to have a media query break the nav into two rows at a specified size. I was planning on targeting the 4th li via nth-child(4) then having it break the line there.

    I’m not sure how to insert a line break like effect with CSS.

    # October 17, 2012 at 10:59 am

    It depends on how you positioned them. Are they floating? Display:inline?

    # October 17, 2012 at 11:00 am

    My advice would be…don’t do it that way. There are MUCH better options out there.

    Give us a look at a live link or a reduced case in Codepen and we can assist you better.

    # October 17, 2012 at 11:04 am

    Oh…and a minor point.

    SERIOUSLY consider having an even number of menu items…it’ll look much better.

    # October 17, 2012 at 11:16 am

    Target the ceil(nbOfElements/2)+1th element and apply a clear. In your case, the 5th one.

    # October 17, 2012 at 11:20 am

    Nah…this is so much better: http://codepen.io/Paulie-D/pen/IokDb

    # October 17, 2012 at 11:28 am

    Using Floating left. I’m developing locally. Here is a simpler version on codepen…

    http://codepen.io/anon/pen/kuLmH

    It’s a wordpress theme using the menu builder feature. So it needs to be flexible.

    # October 17, 2012 at 11:31 am

    Like I said: http://codepen.io/Paulie-D/pen/IokDb

    # October 17, 2012 at 11:33 am

    Definitely going to consider keeping the menu number even. This is a redesign and the current site wasn’t responsive so it never was an issue. Now that I’m making a new responsive theme I may have to make the menu always an even number. We’ll see…

    # October 17, 2012 at 11:34 am

    Thanks everyone for the quick responses. Faster than I ever expected. This is my first time posting an issue on CSS-Tricks forum.

    # October 17, 2012 at 11:38 am

    Yeah, Paulie’s version is definitely the best one to go.

    # October 17, 2012 at 11:40 am

    Needs some work…but the basics are there.

    # October 17, 2012 at 12:08 pm

    So I have a fix for my 7 menu items issue. Once I hit the breakpoint that adds a second row I’ll just remove the home button. The header still behaves as a home button. So I think it’ll be ok.

    http://codepen.io/anon/pen/uIsLm

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".