Streaming live at 10am (PST)

Smooth-scroll passes my sections on one-page website


#1

I have a one-page website with different sections. When I tie my nav links to the sections (i.e. About Us link to the About Us section), the smooth scroll goes beyond those sections. For example, if I click my About Us link, the page scrolls and stops just past the About Us section. I tried the suggestions on this post, http://forum.webflow.com/t/getting-webflows-smooth-scroll-script-to-align-correctly-with-fixed-headers-navigation/3459, but it didn't help. Now, if I do this in the preview screen it's fine, but if I go to the published site, it has this problem. Here is my share link: https://preview.webflow.com/preview/stylus-web-designs?preview=4adb04642c5d353b88b104b3515de96d

Here are some pics. The first two are from the preview mode where the scroll works and the correct nav link stays highlighted blue.

Here are the pics from the published site where the scroll doesn't work.

Notice how the nav bar is covering part of the About Us heading, and the Services nav link is highlighted blue instead of the About Us nav link.

Like I said, I read the other posts, but nothing changes it. It just started doing this without me changing anything to the nav bar. This has happened with some of my other sites too, and I don't know what caused it. I am using Chrome 49.0.2623.112.

Here is my public share link: LINK
(how to access public share link)


#2

Could you give us a link to the published site?

Also, your navigation is way too wide it doesn't fit on my 15" MBP.


#3

The published site is www.styluswebdesigns.com

Also, I was wondering how to make the nav bar and it's elements fit any size screen? How do I make it responsive?


#4

The scrolling is working correctly for me. I would suggest that you may be loading/viewing a version that was published without whichever "fix" actually fixed the problem. Try another browser or clear your cache.

For the nav bar, you've got a few problems to fix.

1) Your nav menu element has a left margin of -485px. Make it 0.
2) Your nav menu is floated right. Change it to no float, absolute positioning, and choose Right (directly below the absolute positioning selection).
3) Your Nav Link elements all have manual positioning putting them 78px from the left. Make that 0. (You will have to select the Home button, as it is also "current" and then one of the other Nav Link elements.)

That should do it.


#5

Awesome! All of that worked! I am still somewhat new to Webflow, so I still don't understand how each of tools works exactly. Out of curiosity, how often do you have to clear your cache to see how the website actually looks?


#6

I wish I knew. That's too technical a subject for me. I just know it works if/when I come up against a situation where the changes I make in code don't show up on the screen.


#7

Ok, well thanks for the help, it was perfect!


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.