Troubleshoot Sticky Navigation issues
The Sticky Navigation template (as seen on the CRM Starter Site) features a dynamic sticky bar that enhances user experience by providing quick access to different content sections on a page. This guide explains how the sticky navigation is built and how to troubleshoot common issues related to its behavior.
How the Sticky Navigation works
The sticky navigation bar is designed to remain visible as you scroll down the page and contains anchor links that lead to different content sections. Here’s how it functions:
The Sticky Bar uses the Stylish List widget to display navigation links.
Each link corresponds to a unique section on the page, which has an assigned HTML ID: #section1, #section2, #section3.
The container that holds the Stylish List widget is configured using the ElementsKit Sticky feature.
The “Sticky Until” setting is used to control when the sticky bar stops sticking. In this template, it is set to #section3, meaning the bar scrolls with the page but stops being sticky once it reaches that section.
On smaller devices, sticky behavior is disabled. The options “Sticky on Tablet Portrait” and “Sticky on Mobile Portrait” are turned off because the layout is not optimized for mobile navigation bars.
Common issues and fixes
1. Sticky bar not sticking
Cause: ElementsKit sticky settings may not be applied correctly.
Fix:
1) Make sure the container that holds the Stylish List has the Sticky -> Top enabled under Advanced -> ElementsKit Sticky.
2) Ensure the “Sticky Until” ID (e.g. #section3 in our case) exists on the page and is spelled correctly.
2. Sticky navigation doesn’t work on mobile
Sticky is disabled by default on mobile and tablet portrait devices. This is expected behavior. The sticky bar is intentionally disabled on mobile for usability reasons.
3. Clicking on links doesn’t scroll to sections
Cause: Section IDs are missing or incorrect.
Fix:
1) Make sure each section block on the page has the correct CSS ID that matches the Stylish List link (e.g., section1, section2, etc.).
2) You can add an ID by selecting the section and going to Advanced > CSS ID.
4. Sticky navigation stops too soon or too late
Cause: Incorrect value in the “Sticky Until” setting.
Fix: Ensure the section ID entered in the “Sticky Until” field is correct.
