I need help with my responsive nav bar!

[kerninglife]

I have a responsive nav bar on my new portfolio site where I want my name off the bar. Problem is when I remove it and resize the window to the smallest width, the black bar goes away. I want the black bar for the nav to stay there with the menu icon thing in the black bar.

I’ve been playing with the css to try and figure out what to do but all I got was that the h1 tag that was around my name is needed for the black bar to stay on the site when the page is small for mobile.

Please let me know if I need to provide anything else that could help.

http://codepen.io/kerninglife/pen/zkFgj?editors=110

[Paulie_D]

Looks like the container is collapsing because (if you remove the h1) it has no child elements that are in the flow or have defined height.

The label you are using as the menu toggle seems to be absolutely positioned (therefore out of the flow)…that might be the issue.

Stripped down Codepen without a lot of the unrequired (and quite repetitive CSS)

You original has 30 classes basically saying the same thing..you need to look at that.

http://codepen.io/Paulie-D/pen/yJAKe

[kerninglife]

I’m a complete noob now when it comes to this nag code but I’ll try I guess to figure it out.

Thanks for the tips.

[kerninglife]

I have a new issue, I have figured out the css but when I scale the window down the menu icon does not open up the menu. It has a pointer over it showing it’s clickable but the menu does not drop down.

Any suggestions?

http://codepen.io/kerninglife/pen/zkFgj?editors=010

[Author]

Posts