Webflow sync, pageviews & more.
NEW
Answers

How do I set the scroll stop point to be 60px above each section's H2 in Webflow for two pages with anchor links to sections "Services" and "Products We Love" where the scroll stop point is not consistent?

To achieve this scroll stop point behavior in Webflow for the "Services" and "Products We Love" sections, you can follow these steps:

1. First, make sure you have your sections ("Services" and "Products We Love") set up with unique class names in the Webflow Designer. You can access the "Add class" option in the element's Settings panel.

2. Once your sections have the unique class names, let's start by targeting the H2 headings within each section. Go to the Styles panel, click on the "+" icon, and select the "H2" element type. Style the H2 headings as desired.

3. With the H2 selected, go to the Selector field in the Style panel and append the class name you assigned to the section. For example, if your "Services" section has a class name of "services-section", the selector field would look like: `h2.services-section`. This will ensure the styling applies only to the H2 within that section.

4. Now, to create the scroll stop point 60px above each section's H2, you can add a negative margin to the sections themselves. This will move the content up, and the scroll will stop 60px above the H2 heading.

5. Select the section you want to edit, and go to the Style panel. In the position section, click on the "+" icon and add a custom margin value of `-60px` for the top margin. This will shift the section upwards, creating the desired scroll stop point.

6. Repeat the above steps for the other section as well. Select the section, add the negative margin `-60px` for the top margin, and set the section class name within the H2 selector.

7. Finally, make sure you apply the anchor links to the corresponding sections. To do this, select the element (e.g., a button or navigation item) that will trigger the scroll to a section, and in the Link settings, select "Page" from the dropdown, choose the page you're currently on, and select the desired section anchor from the Section dropdown.

By following these steps, you'll be able to set the scroll stop point to be 60px above each section's H2 headings for the "Services" and "Products We Love" pages in Webflow. Remember to test your website to ensure the desired scroll behavior is achieved on different devices and screen sizes.

Rate this answer

Other Webflow Questions