Hi,
My smooth scroll section linking is not displaying properly in Chrome on my computer. The navbar is cutting off the top of the content. I’ve seen other people post this issue but never seen any solution presented as of yet. I tried it on Chrome on another computer and it worked fine. Cannot figure out what the variable is! Help?
CHROME:
SAFARI:
Hi @mimfox, I checked in Google Chrome latest version and it seems to be working for me, did you get it restyled ok?
https://cl.ly/3V1R223y2B1u/Screen%20Recording%202018-04-03%20at%2004.23%20PM.mov
To use the smooth scroll section linking, there are a few conditions to setup to get that to work best. Take a peek here: Getting Webflow's smooth scroll script to align correctly with fixed headers/navigation
I would recommend a couple of things.
On the navbar 4, drop that inside of a Section and then give the Section a fixed position instead of the navbar
Set the navbar 4 in elements settings to “disable scroll offset when fixed”:
Nest the Navbar 3 inside of another section, and set it’s tag to header:
I would also remove any margins on sections under the body and only use padding.
I hope this helps.
Hi @cyberdave! Thanks so much, that’s really helpful stuff to know. Unfortunately the scroll still won’t align correctly in my Chrome, but I haven’t found anybody else who’s Chrome loads it like that, so it’s a mystery!
Oh NO, now since making those changes it’s not aligning in ANY browser. What’s going on??? 
Hi @mimfox, it may be a little trickier on this design as you have the first three sections set to a z-index other than the default.
I made a quick video:
https://cl.ly/1a0O0u3v3447/Screen%20Recording%202018-04-05%20at%2010.24%20AM.mov
I hope this helps
@cyberdave Thanks Dave, you legend. I don’t 100% understand all that, but it worked beautifully. Gotta go back to some build basics at Webflow University, methinks. 
Hi @mimfox, simply stated, if an element is using a z-index value to layer an object on the page, the smooth scrolling does not take that element’s height into account when using the smooth scrolling.
Setting the header to the first section having a default z-index solved the issue in this case.
Ah I see, that makes sense. Thanks!
Sorry @cyberdave, just another little z-index issue: The text in the resources section, “GLOSSARY”, “WHAT CAN WE DO”, “ARTICLES”, is all running in front of the menu text, because it’s got a z-index of 2. If I take that z-index away those text items disappear, presumably behind the resource panels. I assume this is because I keep using z-index as a crutch rather than setting things up properly in the first place?
Also, regarding the smooth scrolling, it works beautifully on desktop and tablet, but I can’t get the alignment to work on mobile, maybe because I’ve got some duplicated sections in the mobile versions of the site?
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
