Trouble with Section Anchors on one pager and Logo Slider

Hello fellow designers and devs :raised_hand:t2:, I have a few issues I need your help with, I’m sure it’s something that I must of overseen. Please let me know if you can help​:pray:t2:.

  1. I’m having so much trouble getting my sections to align to the top or my screen when the nabber on top (sticky) travels/scrolls to the page referenced. All sections have a 100VH and should display all at that size as a standard. I need this to work and align correctly on all sizes, It seemed to be working just fine on my 16’ macbook but on my client’s computer (probably smaller size screen) the section anchors do not align. Specially the last three section links on the navbar is calling (for example: Value Prop, Expertise, Contact us (button) - but they are all really not responding the way they should across all responsive sizes - IMO :man_facepalming:t2:).

  1. On the end on the website I have placed a logo preview of the client’s porfolio with logos of the brands they’ve worked with… This has all together stopped working - the animations anyway…

  1. For some weird reason there is a blue line on my sections that looks like my browser is selecting the section… clients dislikes it and I can’t seem to find it anywhere on the code. Any ideas?

As you can see that blue line get annoying and shows on sections when scrolling after your clicked on a navbar link above…

  1. Finally I wanted to have the color red #de393a as a selected style when the user is on that specific page - I know this is basic but I can’t seem to get it set up lol

If you guys could help, that would be super amazing. :face_holding_back_tears:

Thanks you all you your time,

Hi Moises

  1. It looks like you might have fixed the issue for competency and contact but I can see that there is not enough padding at the top of the expertise section (the section link will pin the top of the element with the respective ID to the top of the viewport, currently the nav height is greater than the amount of space at the top of the element with an ID of: 08_Our-expertise.
  2. Looks like the interaction is not bound by class. I fixed this by editing the Logo-Slider-Phone 4 interaction and changing the target to logo_component-Slider - and then change “Affect” from “Interaction trigger” to “Class”
  3. I can’t recreate this form the read-only link but it may be the “outline” which is showing up on the published site. The outline is a helpful accessibility feature so consider changing the colour or style instead of removing it altogether.

I’ll be checking those points here in a bit, thanks for those pointers :innocent: I’ll let you know how it goes.

Hey there I made some changes but yeah on bigger screens (ref 1.) it works great. but if you change the size of the screen to that of a smaller one… on the contact form it breaks.

I need the contact button to take to the section and not break… this is important

I’ve uploaded a temp video explaining:
Click here to see what I mean

Thanks for your help

For the user to actually get to the contact form below they have to click twice… Because on the first time it seems like it’s not taking them there. And that contact form is important. Let me know if there is any work arounds.

Any ideas Pete? Could you check to see it now and if you could help?

Guys I was able to find a solution to this please check the response from the Webflow team via email:

Thank you for contacting Webflow support! I understand you’re experiencing an issue with anchor links not scrolling to the desired section as expected. I’ll be happy to assist you with this!

I was also able to replicate this, however, it only seems to occur if an anchor link is selected before scrolling through the page. If the user scrolls through the page before selecting an anchor link, then the anchors should work as expected.

After taking a closer look at your site in the Designer (Read-only link), it seems that this issue might be caused by the loading type on the image settings. Currently all images on this page is set to Load: Lazy. This is a known issue with certain browsers as images are not loaded before the anchored scroll. This causes an offset on the initial anchor as your client has experienced.

To resolve this: Select each image on this page and update the load type from Lazy to Eager.

I believe the image grids in the “About us” section and the “The Values that define us” section are causing the issue.

Here is an example screenshot for more detail: Screenshot of Image settings

Once you’ve applied this update to ALL images on this page, please publish the site, refresh the browser and verify if this has resolved the issue on your end.