li media query line break

[markthomes]

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.

[JoniGiuro]

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

[Paulie_D]

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.

[Paulie_D]

Oh…and a minor point.

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

[Kitty Giraudel]

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

[Paulie_D]

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

[markthomes]

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.

[Paulie_D]

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

[markthomes]

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…

[markthomes]

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

[Kitty Giraudel]

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

[Paulie_D]

Needs some work…but the basics are there.

[markthomes]

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

[Author]

Posts