Nav menu not collapsing when browser window is resized

[iangdesign]

Hello,

I’m having issues with resizing a menu when the browser drops below 640px. befor I added the text in the 3 columns under the image it was working fine. Now the menu header menu falls below the header but doesn’t collapse. Any thoughts on why this is happening?

Codepen link: http://codepen.io/anon/pen/ezOvZv

Thanks in advance!

[iangdesign]

I changed the px width in the media query and that resolved menu link issue, but then the header is now longer fixed. It scrolls with the page. I am not familiar with javascript or media queries within css. Any help would be appreciated.

[I.m.learning]

I can’t test with my editor because it’s attached to Bootstrap. I also get no good results from codepen.

I tried this in a different site that had thier own tester and this is what happened:

Your code, as it was at the time of this post made the entire page scroll at lower widths… I’m assuming you are calling your navbar your header.

I removed your header code from your media query. It kept the navigation in place; but it moved your dropdown button. You could easily change it to position fixed and not absolute.

Bootstrap is not the greatest, but it saves a lot of time by already making the basis on responsiveness.

Do you have a link to the page?

[Senff]

@LIP_lostinprogramming What does Bootstrap have to do with this? The Codepen example showed everything perfectly, there’s no need to replicate this locally, Bootstrap or not.

I changed the px width in the media query and that resolved menu link issue, but then the header is now longer fixed. It scrolls with the page.

Your menu bar is not fixed on smaller screens because of this:

@media only screen and (max-width : 680px) {

header {

position: absolute;

}

Remove the absolutel positioning and your menu will also be fixed on mobile. However, question is if you actually want that. It’s pretty common practice to not do that on mobile devices, because when the screen is very small, you want to make use of it as much as possible for content. A sticky menu will only reduce the available space.

[Author]

Posts