Page Navigation
An in page navigation of on page anchors or links that will stick to the top of the page on scroll.
Note: The section this module is added to should have its Content Alignment set to Full width. Do not add margin or padding to the section as this will negatively affect the sticky function.
View a live demo of this module.
Content
- Add navigation items of either anchor links or external links
Styles
- Set Dark Mode
- Edit the background and padding
Usage Guide
The Page Navigation module is designed to enhance user experience on content-heavy pages by providing a persistent navigation bar that helps visitors jump between sections. This sticky navigation component is particularly valuable for nonprofits showcasing program details, educational institutions presenting course information, or any organization with long-form content that benefits from quick section access.
When to use this module: Add the Page Navigation module to pages with multiple content sections, such as annual reports, program overviews, event agendas, or comprehensive service pages. It works exceptionally well on landing pages where you want to guide donors or stakeholders through different impact areas without losing their attention to scrolling fatigue.
Page editor implementation: After dragging the module into your page, ensure you’re working within a full-width section to maintain the sticky functionality across all device sizes. The Impact theme’s responsive design will automatically adjust the navigation bar’s appearance on mobile devices, but padding or margin additions to the parent section can disrupt the seamless sticky behavior.
Content strategy tips: When creating your navigation items, use clear, action-oriented labels that match your on-page section headings exactly. For anchor links, you’ll need to add corresponding anchor IDs to your target sections within the page editor. External links work well for connecting to related resources, donation pages, or detailed program information housed on separate pages.
The Dark Mode styling option allows you to match your organization’s brand colors while maintaining readability. Consider your page’s color scheme when choosing between light and dark modes – the navigation should complement your hero section while remaining visible as users scroll through different content areas.