Webflow sync, pageviews & more.
NEW

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
  • Use full URLs with hashes (e.g., /#about) instead of just anchor links (e.g., #about) to ensure section links work from all pages.
  • Set these links in Webflow's Link Settings under "URL" for consistent behavior across your site.

Yes, navigation links to home page sections can break on other pages if they’re not using full URLs. This happens because relative fragment links (like #about) only work on the page you're currently viewing.

  • Webflow typically uses anchor links like #section-id to navigate to specific sections of the same page.
  • If you're on a page other than the homepage (e.g., /contact) and click a nav link like #services, the browser looks for an element with that ID on the current page, not the homepage.
  • Since the ID likely doesn’t exist on the other page, the link does nothing.
  • Instead of using just #section-id, use a full URL with the section hash, like /#services.
  • This tells Webflow (and the browser) to load the homepage and scroll to the desired section.
  • Example: change the href of your nav item from #about to /#about.

3. Best Practice for Webflow Navigation

  • In Nav Links, use the Link Settings panel and choose "URL" instead of "Section".
  • Enter the full path (e.g., /#about) instead of just the anchor.
  • This ensures consistent navigation behavior from other pages.

4. Consider Smooth Scrolling Behavior

  • Webflow only enables smooth scrolling for same-page anchors by default.
  • If you navigate to a section using /#section-id from another page, it reloads the page and jumps to the section directly (no smooth scroll).
  • Advanced users can implement JavaScript workarounds, but it’s not natively smooth across different pages.

Summary

To ensure section links work from all pages, use full URLs like /#section-id instead of just #section-id. This prevents broken navigation and ensures users are directed back to the homepage when needed.

Rate this answer

Other Webflow Questions