Are there any issues when using Webflow where navigation items linked to home page sections no longer work when on other pages, and should they be linked with URLs instead?
TL;DR
- Anchor links like
#section-idonly work on the page containing the target ID. - To make them work sitewide, use full relative URLs (e.g.,
/#about) in link fields to ensure proper navigation to the homepage and scrolling to the intended section.
Navigation links that point to sections on the home page (via anchor links like #section-id) often break when you're on other pages in Webflow. This is because relative section links don't work across pages unless properly set up.
1. Why Anchor Links Fail Across Pages
- Anchor links (e.g.,
#about) only work on the page where the ID exists. - If you're on a different page (e.g.,
/contact) and click a nav link such as#about, the browser searches for an element with that ID on the current page, not the homepage. - This results in the link either doing nothing or unexpectedly navigating to the top of the page.
2. Use Full URLs for Cross-Page Anchor Links
- To fix this, use full URLs that include the page path and anchor, like
/#aboutinstead of just#about. - This ensures the browser navigates back to the home page and then scrolls to the correct section.
- In Webflow, this can be done by linking to
/#section-idin the URL field of a link element instead of choosing a Section from the dropdown.
3. Additional Tips
- Ensure the section ID is unique and not reused on other pages.
- When using full path URLs (like
/#about), Webflow will still treat them as internal links and not reload the site frame. - Consider using a custom script to enable smooth scrolling if the Webflow default doesn’t behave the same across page loads.
Summary
Section links (like #about) work only on the page where the section exists. To make navigation work sitewide, use the full relative path (e.g., /#about) instead of just the anchor. This ensures users are redirected to the homepage and scrolled to the right section.