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
- Create new pages from the Pages panel and link them in the Navbar using the Element Settings panel.
- Publish the site to apply changes and fix scrolling issues by verifying section IDs, publishing status, and properly assigned interactions.
To add new pages to your Webflow site menu and fix a scrolling issue that works in the Designer but not in the live version, follow these steps:
1. Add and Edit New Pages in Webflow
- Go to the Pages panel (left side of the Webflow Designer).
- Click “+ Add Page” to create a new page.
- Enter the page name and custom slug (URL path), then click Create.
2. Link Pages in the Navigation Menu
- Select your navigation/menu element on the canvas.
- Inside the Navbar, click on the link block or nav link you want to update.
- In the Element Settings panel (gear icon) on the right:
- Choose Page from the link type options.
- Select the newly created page from the dropdown.
- Update the link text accordingly.
- To add a new link, duplicate an existing menu item, then link it as above.
3. Publish for Changes to Go Live
- After adding or modifying links, click Publish at the top right.
- Choose to publish to your custom domain and/or Webflow.io subdomain.
- Check the live version to ensure navigation updates are working correctly.
4. Fix Scrolling Issues Not Working on Published Site
- Scrolling effects (e.g., interactions or anchor links) that work in the Designer but not on the live site often fail due to:
- Publishing delays: Ensure the latest version is published.
- Incorrect anchor links: Ensure anchor links use correct section IDs (e.g., “#about”, matching the section’s ID exactly).
- Interactions tied to incorrect page names: Check if your page interactions are targeted to a specific page.
- Missing or duplicated IDs: Ensure all section IDs are unique and present on the live page.
5. Recheck Scroll-Based Interactions and Settings
- Go to Interactions panel (lightning icon).
- Review page load and scroll-triggered interactions.
- Ensure they are assigned to the correct page or elements.
- Avoid interactions that only trigger in preview mode, such as ones scoped to CMS items not rendered the same on live.
Summary
To add new menu links, create a page in the Pages panel, then link it in your Navbar element using the Element Settings. If scrolling effects don’t work when shared, double-check IDs, interaction targets, and that the correct version is published.
