How can I fix the issue with the two page section links not working in Webflow, specifically the Abningstider and Kontakt links in the menu, despite other links working fine?
TL;DR
- Ensure each section has a unique, lowercase ID (e.g.,
abningstider,kontakt) with no spaces or special characters. - Set navbar links to link type "Section" and match them to the correct section ID.
- Use full path anchors (e.g.,
/#kontakt) if linking from other pages. - Avoid duplicate IDs in reused components or symbols.
- Publish the site and test links on the live version, not just in preview.
If your page section links (anchor links) like Abningstider and Kontakt aren’t working in your Webflow menu, while others are, it typically comes down to issues with section IDs, link formatting, or page structure.
1. Check the Section IDs
- Make sure the elements on your page that define the Abningstider and Kontakt sections have assigned unique IDs.
- Select the section in the Webflow Designer.
- In the Element Settings panel (D key), ensure ID field is set correctly (e.g.,
abningstider,kontakt). - Verify there are no spaces, uppercase letters, or special characters—IDs are case-sensitive and should be lowercase and simple (e.g.,
kontakt, notKontakt Section).
2. Verify Link Settings in the Navbar
- Go to your navbar in the Designer and select one of the non-working links.
- In the Link Settings panel, make sure the link type is set to "Section" and correctly points to the corresponding section ID (e.g.,
#kontaktor simply select from the dropdown). - If you're linking to an anchor on the same page, use only the anchor name (e.g.,
#kontakt) without a full URL. - If your link type is set to "URL", and you're attempting to link to a section on the homepage, make sure you're using the correct format:
/#kontakt.
3. Linking From Other Pages?
- If these anchor links are in a navbar used site-wide, but the anchor targets exist only on the homepage:
- Use full path anchor links, such as
/index#kontaktor/#kontaktdepending on your homepage slug. - If your homepage URL is
/, the correct format is/#kontakt. - If it's
/home, use/home#kontakt.
4. Check for Symbol or Reused Sections
- If the Abningstider or Kontakt sections are inside a Symbol or component being reused, ensure you're not accidentally using duplicate IDs across pages.
- Webflow may not allow duplicate IDs, or they may cause conflicts.
5. Publish and Test Again
- Changes to IDs or links won’t fully update on the live site until you click Publish and test the links on the live published URL, not just in Preview mode.
- Test both from the homepage and from other pages to confirm the scroll behavior works.
Summary
To fix non-working section links like Abningstider and Kontakt in Webflow:
- Ensure the correct, unique section IDs exist on the page.
- Set navbar links to "Section" type and point to those IDs.
- Use full path links (e.g.,
/#kontakt) if linking from other pages. - Avoid ID conflicts across components or symbols.
- Republish the site and test on the live domain.
Fixing these issues should restore proper scroll behavior when clicking those anchor links.