responsive navigation alignment issue

[timwhelan]

I have just started learning about responsive grids, menus and the like… I have, with the help of design shack, built a responsive menu and started to test it.

However, in Firefox full browser view and Chrome narrow view the last navigation drops down. But in Chrome full browser it is fine. In firefox it just gets worse.

Click here to see the issue

Any thoughts as how to approach correcting this?
Thanks!
Tim

[Ricardo C.]

If you do not already, have it link to a css rest stylesheet. Yahoo has a great css reset if you want to check it out, Yahoo CSS Reset .

[timwhelan]

Would it be best to place in top of global style sheet since I building in Drupal?
Or link to it through Drupal?
Thanks!

[Ricardo C.]

Yes. Always place it before any other css.

[timwhelan]

Thanks! Have a great weekend!

p.s. I am probably going to have to add some reset code for the navigation as well. Will let you know how it works out.

[timwhelan]

So, reset code didn’t help out at all.

In trying to think it through I have one of the li elements not working right…ideas as too what would help, margin, line-height.

Would love ideas – I’ll keep testing.
Thanks

[dfogge]

try setting a min-width on the navigation container.

if that doesnt work or make sense can you set up a jsfiddle or link to the page so i can dig into the code and see exactly whats going on?

[timwhelan]

Okay – here is what I have to share…

I changed nav ul – to nav ul li and added padding 0 – that fixed the initial last child dropping when in full browser mode.

To correct the li’s dropping in narrow mode – I had to tweak the @media for narrow, I had to adjust the li:nth-child(5)-(8) by adding the border in there.

That did it. Good luck to ya’ll

[timwhelan]

@dfogge – thanks for the heads up will check that out next time as well. I need to learn to post to jsfiddle for code sharing.
Thanks!

[dfogge]

ah congrats on solving that.

just for future reference mr coyier’s post on how to use jsfiddle is here: https://css-tricks.com/seriously-just-make-a-jsfiddle/

[Author]

Posts