SEOLYMP Heading Progress Navigation

SEOLYMP Heading Progress Navigation creates a visual page navigation from the headings in the main content. It provides separate layouts for desktop and mobile and can serve as an alternative to the browser’s default scrollbar.

The plugin follows the semantic structure of the active WordPress theme. It automatically detects visible H1 and H2 headings inside a <main> element or an element with role="main". Headings outside the main content are ignored by default.

Heading detection

• Detects visible H1 and H2 headings in the main content.
• Supports <main> and [role="main"] content containers.
• Allows manual navigation points with the hpn-headline CSS class.
• Allows mobile-only navigation points with the hpn-headline-mobile CSS class.
• Supports custom marker labels with the data-hpn-label attribute.
• Avoids duplicate markers when a regular heading is placed inside a manual marker.

Flexible display rules

• Separate activation controls for desktop and mobile.
• Configurable desktop breakpoint.
• Scope controls for the front page, single post types, archives, and taxonomy archives.
• Line-by-line URL exclusions with optional subordinate-path matching.
• Responsive switching between desktop and mobile navigation when the viewport crosses the breakpoint.

Custom design

• Configurable positioning, sizing, colors, opacity, borders, backgrounds, and indicators.
• Separate design settings for desktop and mobile.
• Multiple mobile indicator shapes and color modes.
• Configurable mobile navigation controls.
• Built-in design presets that remain fully editable after they are applied.

Helpful diagnostics

Logged-in administrators receive front-end notices when the navigation cannot be displayed because the main content area is missing, fewer than two eligible headings were found, or the scroll distance is too short. Visitors do not see these notices.