Streaming live at 10am (PST)

Nav Bar / Links jumping on scroll


#1

I’ve deleted and rebuilt the nav bar twice to try and keep my nav links from “jumping” while scrolling, but I can’t get it to stop. I’ve looked at padding and margins and nothing looks strange, even on hover states, and the only thing I can figure is it is a problem with the ID/in page linking? Thoughts? Please help! Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/steven-franks?utm_source=steven-franks&preview=e3e464ba2293fd819209d528c7b2eb8f

Published site: http://steven-franks.webflow.io

Exported to domain site: http://www.stevenfranksmusic.com


#2

@teletuned4 this one has me stumped. I am not entirely sure what do to do here. Hopefully someone else form the community can help you.


#4

@WebDev_Brandon Yeah me too. I’ve been a Webflow user since the early days and I’ve never seen this. I wonder if it’s a bug and not a design/code issue on my part?


#5

@teletuned4, I would send a note to @webflow support! I couldnt figure it out. I tried so many different things, even removing the 100vh and it still did it.

Really weird indeed. Good Luck with that one. Post in here when/if it is ever figured out.


#6

Hi Steven,

Yep, this is a real strange one alright!!

Couldn’t see anything in the settings that would indicate why this is happening, thought there might be a page scroll interaction or something – but there are no interactions!!?

I can see that the issue is related to the Anchor ID’s coming into view when the page scrolls (either manual scroll or after clicking a link), but can’t see any reason why this would happen??

Be interesting to know what the cause is. :face_with_raised_eyebrow:


#7

@WebDev_Brandon Will do!


#8

@knk Thanks for taking a look, hopefully someone will come across a fix. I felt like it was the anchor ID’s but I cannot figure out why.


#9

Hi @Brando,

Is this an actual bug? Or an isolated issue?


#10

Hi @teletuned4 @knk

This doesn’t look like a bug, but maybe a small style issue on the current state of the nav links.

It can be tricky to get the current state active for anchor links like this, though. The best way to get to the current state for these may be to switch the link setting to a page like Home.
CloudApp

From here, you can check the current state styles against the normal state styles for the navlinks. Once all is good, you can change back the link setting.

You may also need to unpublish, then republish the site if you still see the weird jump.

I hope this helps and please let me know if this resolves the issue :bowing_man:


#11

Hi @Brando,

Awesome :+1::grin:

didn’t even think to check the current state.

Thanks for the insight.

Cheers
Keiran


#12

@Brando Thanks so much, it was a weird fix but it fixed it nonetheless!! Thanks to everyone who looked at this to get me up and running! I appreciate your help!


#13

@Brando @knk Well it almost fixed it completely! So strange…it works on Desktop, Tablet, Phone Landscape but not Phone Portrait! I tried the fix above again but it’s not working. Anybody ready to go round 2 on this one? Thanks!


#14

Hi @teletuned4, @Brando

Sorry for the delay in replying, have been away from the PC for a few days.

Looks like you had changed the Padding on the Nav Links from 5px to 0px on the Mobile viewport, but hadn’t changed the Nav Link ‘Current’ state padding from 5px to 0px.

Change the setting and see how that works for you.

To get to the ‘Current’ state a little easier, I changed the ‘News’ Nav Link to point to the Home Page, click on the main hero image (or any other element that brings you to the Home Page within the style panel), and then select the News Nav Link, that will highlight the Current state as you have selected the link that points to the page you are currently working within.

Don’t forget to change the ‘News’ nav link back to point to your New anchor link after you have made the changes to your padding.

Regards,
Keiran

Here are the images of the settings for the Nav Link Padding:


#15

@knk Thanks this fixed it! I really appreciate the community pulling through for me on this one. It was a real head scratcher.


#16

Hi Steven,

you’re most welcome, glad to have helped.

Yep, the Webflow community is awesome!

Cheers

Keiran