Download Plugin

Sticky Header/Navigation Extension

Written by

in

Overview

The Sticky Header/Navigation Extension makes your site’s navigation menu or header stick to the top of the viewport when users scroll down the page. This ensures your navigation remains accessible at all times, improving user experience and making it easier for visitors to navigate your site.

Key Features

  • Sticky on Scroll: Header sticks to top when user scrolls past it
  • Smooth Transition: Elegant animation when header becomes sticky
  • Auto Height Adjustment: Automatically accounts for header height
  • WordPress Admin Bar Compatible: Works properly with WP admin bar
  • Mobile Responsive: Option to disable on mobile devices
  • Z-Index Control: Ensures header appears above other content
  • Shrink on Scroll: Optional compact mode when sticky

How to Use

  1. Create your header/navigation using a Section or Group block
  2. Select the header block
  3. In block settings, find the Sticky Header option
  4. Enable “Make this header sticky”
  5. Configure sticky behavior options
  6. Adjust offset if needed (for admin bar)
  7. Test by scrolling down the page

Settings

Basic Settings

  • Enable Sticky: Turn sticky behavior on/off
  • Offset from Top: Distance from viewport top (accounts for admin bar)
  • Transition Duration: Speed of sticky animation (milliseconds)
  • Shrink When Sticky: Reduce header height when stuck

Advanced Options

  • Sticky Class: Custom CSS class added when sticky
  • Background on Sticky: Change background color/opacity when sticky
  • Shadow on Sticky: Add drop shadow when header sticks
  • Z-Index: Control stacking order (default: 1000)

Responsive Controls

  • Disable on Mobile: Turn off sticky behavior on small screens
  • Disable on Tablet: Turn off sticky on medium screens
  • Mobile Breakpoint: Define when mobile behavior kicks in

Common Use Cases

  • Site Navigation: Keep main menu accessible while scrolling
  • Landing Pages: Persistent CTA or contact button in header
  • E-commerce: Sticky header with cart and search
  • Documentation Sites: Always-accessible navigation and search
  • Long-Form Content: Quick access back to menu on articles
  • Multi-Page Sites: Consistent navigation experience

Best Practices

  • Keep sticky header height reasonable (60-80px is ideal)
  • Use shrink-on-scroll for better mobile experience
  • Add subtle background or shadow when sticky for visual clarity
  • Ensure sufficient contrast between header and content
  • Test with WordPress admin bar visible (logged-in users)
  • Consider disabling on mobile where viewport is limited
  • Use transition animations for smooth user experience
  • Ensure header does not cover important content

Design Tips

Visual Feedback

  • Add background color/opacity change when sticky
  • Apply subtle drop shadow for depth
  • Consider reducing logo size when sticky
  • Adjust padding/height for compact sticky state

Performance

  • Keep header markup simple and lightweight
  • Avoid heavy images or animations in sticky header
  • Use CSS transforms for better performance
  • Minimize reflows with will-change CSS property

WordPress Admin Bar Compatibility

The extension automatically detects and accounts for the WordPress admin bar (visible when logged in). The default offset is set to accommodate the admin bar height (32px on desktop, 46px on mobile).

Mobile Considerations

  • Limited Screen Height: Sticky headers take valuable viewport space on mobile
  • Touch Interactions: Ensure menu items are large enough (min 44x44px)
  • Keyboard Overlap: Consider behavior when virtual keyboard is visible
  • Performance: Mobile devices may struggle with scroll events
  • Recommendation: Use shrink-on-scroll or disable sticky on small screens

Troubleshooting

  • Header not sticking: Verify sticky setting is enabled, check parent container overflow property
  • Jumpy scroll behavior: Reduce transition duration, check for conflicting JavaScript
  • Header covers content: Increase offset value, add padding to page content
  • Not working with admin bar: Adjust offset to 32px, clear cache
  • Flickering on scroll: Check z-index value, ensure proper CSS positioning
  • Mobile issues: Enable mobile disable option, test on actual devices
  • Background not changing: Verify background-on-sticky setting, check CSS specificity

CSS Classes

The extension adds these CSS classes for styling:

  • .dsgo-sticky-header: Applied to sticky-enabled header
  • .is-sticky: Added when header is in sticky state
  • .is-not-sticky: Present when header is in normal position

Example Use Case: E-commerce Header

  1. Create Section block for header
  2. Add logo, navigation menu, search, and cart icon
  3. Enable sticky header with shrink-on-scroll
  4. Set background to semi-transparent white when sticky
  5. Add drop shadow for depth
  6. Reduce logo size by 20% in sticky state
  7. Disable sticky on mobile for better UX

Accessibility

  • Ensure keyboard navigation works with sticky header
  • Maintain focus states for all menu items
  • Use proper ARIA labels for navigation
  • Test with screen readers to verify functionality
  • Ensure sufficient color contrast in both states

More posts