How can I make an anchor link to a section on a new page in Webflow with a fixed header, without the top of the section being covered by the header?
To create an anchor link to a section on a new page in Webflow with a fixed header that doesn't cover the top of the section, you can use custom code and a little bit of CSS. Here's how you can achieve that:
1. Add an ID to your section: In the Webflow Designer, select the section you want to link to and go to the Settings panel. Under "Element Settings," add a unique ID to your section. Make sure to remember this ID as you'll need it later.
2. Create your anchor link: In your navigation menu or any other element, create a link that points to the section on the new page. To do this, select the element, go to the "Link settings" panel, and choose "Page" from the dropdown. Select the target page and add a slash "/" followed by the ID of the section, e.g., /new-page/#section-id. Replace "new-page" with the actual page URL and "section-id" with the ID you added in step 1.
3. Add custom CSS: To account for the fixed header and avoid the section being covered, you'll need to offset the scroll position when navigating to the anchor link. You can do this by adding custom CSS code. You have two options:
a. CSS Only (no JavaScript): If you want to achieve this using only CSS, you can use the handy \`scroll-margin-top\` property. Apply the following CSS to the section you're targeting:\`\`\`csssection { scroll-margin-top: 100px; /\* Adjust this value based on the height of your fixed header \*/}\`\`\`b. CSS with JavaScript fallback: If you need to support older browsers or need more precise control, you can utilize JavaScript to achieve the same effect. Add a custom code block to your project's custom code settings or an HTML embed element on the page where the section resides. Use the following JavaScript code:\`\`\`javascript<script>document.addEventListener('DOMContentLoaded', function() { var section = document.getElementById('section-id'); /\* Replace 'section-id' with the actual ID of the section \*/ if (section) { window.scrollTo(0, section.offsetTop - 100); /\* Adjust the offset value based on the height of your fixed header \*/ }});</script>\`\`\`That's it! Now, when you click on the anchor link, the page will scroll to the section while ensuring that the top of the section is not covered by the fixed header. The custom CSS or JavaScript code will offset the scroll position accordingly, providing a smooth user experience.