It’s not about the snippet, it’s about using a fixed header 😀
what about using something like this?
.navbar.resp .nav {
max-height: 150px;
overflow-y: scroll;
}
of course you need to adjust that max-height, and I suggest also media queries on the height to tune it for specific devices/viewports.
I got the snippet off the themesandco.com site, so I thought it would make sense to focus on it, instead of recreating the wheel.
Thanks for the suggestion. I will try it out on another test site I have up. I’ll post back with the results.
No no, sorry I expressed myself badly, I wanna just tell you that it’s not really about that snippet – which clearly has to be improved, so thanks for pointing this out!!! . Basically what does that snippet? Nothing special, sets the header fixed with the css property and adds a padding top to the body (that margin-top for the #main-wrapper isn’t really needed).
No worries, I’m just glad to get any help with this. I think a lot of others would benefit from having this worked out also. Fixed headers/menus on a mobile device are great in a lot of situations.
I tried the css you suggested, but I couldn’t get it to work. The header remained at top of page when I scrolled down. This was so on my desktop and on mobile device.
The first solution, from the themesandco.com site, worked great a making the header stick. The issue is that you can’t open the navbar if the page is scrolled down at all, or at least this is what’s happening on my phone. The header follows you when you scroll, you just can’t open the navigation to go anywhere else in the site (not good).
I found this article which give a video demonstration of “Scrolling == unusable position:fixed element”
This is the issue I’m seeing when I am on my phone viewing the fixed header/nav.
Why do you say “the first solution”? .. the code I gave you was in addition to that solution not a replacement.
I think I’m not understanding the point.
I’m on your test site and made the window 360×185, then set the code I gave you above:
.navbar.resp .nav {
height: 100px;
overflow-y: scroll;
}
This is what I get: http://i58.tinypic.com/2zg9gs8.png
I can use the menu this way, isn’t what you wanted?
My bad, I thought you meant as a replacement.
As far as your test, did you perform this on a mobile device?
I will get the code you suggested in there now.
I made a test emulating (google-chrome dev-tools) google-nexus S
Ok, I got the css you suggested inserted into the stylesheet, as an addition to what was already there.
The navigation works when the page is not scrolled down, but it still locks up when I scroll down at all (the navbar won’t open).
I also got a friend to test, and the result on the android was the same. So I don’t think it’s just my phone.
Ok, so let me understand, when the page is all scrolled down you click on the menu button and the dropdown just doesn’t appear, right?
If you have a test site on which I can reproduce this, tomorrow I will try to better look into this.
Yes, that is correct. I can’t open the menu even if I just scroll down a bit. I can see the menu, I just can’t open it (it won’t drop down when clicked). The menu works great a following me as a scroll down the page, bit it won’t open.
But if I scroll back up to the very top, then I can open menu (it will drop down when clicked/tapped).
Again, none of the issues are on a personal computer, only on a smartphone (android).
I will leave the test site active (mentioned in link above).
Thanks for all of the help.
Sorry andrew55 just tested it with a samusung galaxy tab s3 and with a samsung S Advance smartphone( android 4.1.2) and the menu button is clickable when I scroll down ( the dropdown menu appears) with the default browser.
The only thing I’ve noticed in your test-site (with the smartphone) regarding to the menu button is that it drops on a newline because of the large logo picture, in portrait, therefore once I open the dropdown menu I’m not able to collapse it.
Thank for for testing that. I have a samsung s2 (I know, I probably need to get a new phone). Maybe that is the issue. Maybe it’s an issue with older operating systems. I’m really not sure.
I had a friend test on a samsung s3 and saw the same issue that I did, so I’m a bit confused.
On my phone, not only do I get the issue with my test site, but also with Dave’s site, who I believed first posted the snippet:
http://rdellconsulting.com/
As far as the large logo picture, are you referring to the one installed inline within the menu (that only says Lifeleap)? I’m just checking because there is another one that is suppose to be hidden.
Thanks again for the help.
About the large logo picture, well sorry probably it was the call-now pic, anyway the sum of them pushes the menu button down 🙂
And yes Dave posted it, but as you can see there it has become, over time, something collaborative.
So is something you have with the default browser on s2 and s3 .
I’m a bit confused too :/
Really cannot see what could be the issue, that snippet is simple and inspired to the boostrap example, though that is built with bootstrap3: http://getbootstrap.com/examples/navbar-fixed-top/
p.s.
by the way in this topic I gave you two codes, but the correct one is that with max-height, instead of height, and you can use overflow-y: auto; instead of scroll .. I think, sorry for the typos.
I guess I’ll keep searching to find an answer.
I know there is a solution somewhere. If you look at Zopim Chat, Share This, or Add this, they all have fixed elements which work on my phone, and probably every other smart phone out there.
I checked out the bootstrap menu. It works great on my personal computer, but on my android, it doesn’t stay fixed. It goes away (stays a top) when I scroll down. Maybe it has something to pick up my android version, and serve me a different script – who knows.
I appreciate the info about the call now picture – I know now that I need to fix this (which should be easy).
Thanks for the help.
