I’ve created a navbar that sticks to the top of the screen using CSS position: sticky. This works fine in Safari. However, not in chrome. It’s not the easiest to explain.
The navbar works fine. It sticks, and so does the text. But the links behind the text are scrolling, so very quickly the links scroll off the screen and I’m left with a navbar with simple text that is useless.
I’ve tried adding the sticky position to the nav container, and to the ul li a divs, but to no avail.
Anyone had this problem? it works on Safari, so I find it a bit confusing.
Does this help. Image one is just as the navbar has stuck at the top of the page. I’m able to select the links, ‘services’ highlighted orange.
In the second image (I’ll post below) I’ve scrolled down. I can no longer select any of the links. I believe it’s because although everything appears to have stuck in place, the functionality of the link has scrolled off the screen, leaving only the text.
There’s a lot of code in my navbar and I can’t link to the site. Just hoping someone might recognise the problem. The code I’ve used to stick the navbar is this.
Still not really sure what’s happening without seeing the code but sticky doesn’t have great support and it looks like it’s for a top nav is there a reason you didn’t use position: fixed ? It doesn’t look like you’d want any content above the nav.
Are some of the children elements of your nav absolutely positioned? I believe position: sticky is just position: relative until it moves beyond a certain point and js triggers it to position: fixed so if you have some absolutely positioned elements relying on the relative positioning of the nav bar it would all go haywire I suppose.
“A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it “sticks” in place (like position:fixed).”
I have a logo above the navbar that scrolls off the screen. Otherwise I would use fixed. This is specifically for phones so will go much narrower than the images I uploaded.
I’ve tried changing other positional elements but no luck, worth a try. As I said it works perfectly in safari so I don’t think it’s anything fundamentally wrong with the code.
Perhaps I’ll ditch the sticky position and try it with jQuery, although I that gives me a different set of issues to solve. Don’t you just love it?
I’ve just found it, just as I was giving up. Removing the overflow-x: hidden has fixed it. Why that broke it on Chrome and not safari, I don’t know. But then I don’t know much. Thanks for your input.
html, body {
max-width: 100%;
height: 100%;
overflow-x: hidden;
}
