Webflow sync, pageviews & more.
NEW

How can I edit and link new pages in the menu of my Webflow site? Additionally, why is the scrolling effect not working when I share the site but works in the editor?

TL;DR
  • Add new pages via the Pages panel, edit the Navbar symbol, insert new Link Blocks, and set each to the correct page in Element Settings.
  • Publish changes, verify scroll interactions are configured correctly, avoid custom code conflicts, and test on the live site using browser tools.

To add and link new pages in your Webflow site’s menu, and to address differences in scroll behavior between the editor and live site, follow the steps below.

  • Create or open your page: Go to the Pages panel (on the left sidebar) and add a new page or open the existing one you want to link.
  • Open the Navbar symbol: If you're using a Navbar component, double-click on it to edit the symbol. It’s typically placed inside your header.
  • Add a new Menu Link:
  • Inside the navbar, locate the Nav Menu (unordered list of links).
  • Copy an existing Link Block or Text Link, or drag a new Link Block into the menu.
  • Change the text to your desired page name.
  • In the Element Settings panel (D key), set the Link Destination to the appropriate Page under the Page dropdown.
  • Repeat for other links and Publish to see changes live.

2. Why Scroll Effects May Not Work on Shared or Published Site

Scroll-based interactions (e.g., fades, slides, sticky headers) may break in the live version for several reasons:

  • Publish Required: Changes in the Webflow designer don't automatically apply to your live site. Make sure you click Publish (top-right) after making adjustments.
  • Custom Code Conflicts: If you've added any custom code (like JavaScript or libraries in the Page Settings or Project Settings), verify it is not blocking scroll or affecting elements.
  • Page Anchors or IDs: If scroll effects depend on Section IDs, ensure those IDs are unique and correctly referenced.
  • Browser Extensions or Cached Data: Viewing a shared link in a different browser or incognito mode can reveal issues hidden by your local session cache.
  • Interactions Settings:
  • Go to the Interactions panel (lightning icon).
  • Check if the animation is tied to a “When scrolled into view” trigger and ensure the affected elements are on the page and visible.

3. How to Test Scroll Behavior for Live Site

  • Open the Published URL: Use the live domain (e.g., yoursite.webflow.io or your custom domain).
  • Use Chrome DevTools (right-click > Inspect) to watch console errors and monitor loaded scripts.
  • Check console for errors related to scroll or interactions.

Summary

To link new pages in your menu, edit the Navbar component, add a new Link Block, and set it to point to the correct Page. If scroll effects don’t work on the published site, ensure your changes are published, custom codes aren’t interfering, and interactions are properly configured and targeting visible elements.

Rate this answer

Other Webflow Questions