Make scrolling easier: Creating a sticky menu in WordPress with MaxiBlocks


Situations where sticky menus shine

  • Long-scroll content: Blogs, landing pages, tutorials
  • Ecommerce: Always-visible cart and product categories
  • Service businesses: Contact, Book a Call, or Quote CTAs
  • Mobile navigation: Keeps users from having to swipe endlessly

Real-world benefits

  • Users can jump between sections without losing their place
  • Important CTAs like “Buy Now” are always visible
  • Helps reduce bounce rates by removing navigation friction
  • Keeps users feeling in control of the browsing experience

Sticky menus aren’t just helpful they’ve become an expected part of a modern, well-structured website.

Creating a sticky menu in WordPress with MaxiBlocks

Step 1: Select your navigation container

  • Click the block that holds your navigation links this is usually labeled “Menu” or “Navigation Wrapper” in MaxiBlocks

Step 2: Access advanced settings

  • In the right sidebar panel, scroll to the Advanced Settings
  • Click into the “Position” tab to control how the block behaves while scrolling

Step 3: Enable sticky position

  • Change the position from Default to Sticky
  • This locks the menu to the top of the screen as users scroll

Step 4: Fine-tune sticky settings

  • After selecting “Sticky,” open the Set equal settings panel
  • Enter 0px as the Top offset to keep the header tight against the viewport
  • Optional: Add a small shadow or semi-transparent background to distinguish it from page content

Step 5: Preview and test

  • Save and preview your layout
  • View in incognito or after logging out to avoid the WordPress admin bar overlapping the sticky header
  • Test on multiple screen sizes to ensure consistent behaviour

Optional enhancements

  • Add animation for when the menu appears or hides
  • Hide sticky headers on mobile if your design feels cramped
  • Use a separate mobile version of your sticky menu with simplified items

Subscribe to our newsletter

The Do’s: Best practices for success

Do keep it minimal

Too many items in a sticky menu will clutter the interface and overwhelm users. Stick to:

  • One or two CTA buttons (Book Now, Free Trial)
  • Optional icon-based links (cart, search, hamburger menu)

Do optimise for mobile

  • Use larger touch targets
  • Keep the menu under 60px tall
  • Collapse secondary items into a hamburger menu for a clean experience

Do maintain brand consistency

  • Use the same colour palette, font styles, and button designs
  • Match spacing and shadows with the rest of your layout
  • Keep interactions predictable and smooth

The Don’ts: Pitfalls to avoid

Don’t cover key content

Sticky headers that overlap your hero section or obscure headings create a frustrating UX. Always:

  • Add top padding to the section below the sticky header
  • Preview layout shifts on different screen sizes
  • Use z-index wisely to ensure proper layering

Don’t ignore accessibility

Make sure your sticky menu:

  • Can be navigated with a keyboard
  • Has clear focus states for links and buttons
  • Uses proper heading levels and ARIA labels when needed

Don’t slow down the site

Avoid using oversized images, heavy scripts, or bloated plugins inside your sticky header. Keep things lean for speed.

Myths vs. Facts

Myth: Sticky menus annoy users

Myth: They only matter for ecommerce

Fact: Any website can benefit portfolios, service businesses, blogs, even nonprofits.

Myth: They require advanced coding

Build like a pro

Common mistakes and how to overcome them

The header looks fine on desktop, but breaks on mobile

Sticky setting is applied, but it’s not working

Double-check you’ve selected the correct parent block. Some headers use multiple nested containers and ensure the one set to Sticky is the wrapper.

Menu overlaps the admin bar

This only happens while logged in. Preview your site logged out or in an incognito window to see the real result.

Creating a sticky menu
Creating a sticky menu

Life hacks and UX enhancements

Add a contrasting scroll-state background

Use sticky menus as a conversion tool

Include a CTA like “Schedule a Call” or “Subscribe” inside the sticky header. Make sure it stands out visually and leads to a high-converting page.

Pair with anchor links

Key terms you should know

Offset: The distance (in pixels) between the sticky element and the top of the screen. Typically set to 0 for a seamless lock.

Z-index: A CSS property that determines layering. Higher values ensure sticky menus stay on top of other elements.

Troubleshooting common issues

Sticky header not appearing

Check that you applied the Sticky setting to the correct container and that the page has enough scrollable height to activate it.

Menu breaks on scroll

Avoid absolute positioning or conflicting animations. Keep it simple and clean.

The header is too tall

Next steps: Moving forward with confidence

Keep it simple. Focus on clarity. Make sure it works across every screen. And don’t be afraid to test new layouts MaxiBlocks makes it easy to adjust, preview, and refine.

WordPress menus for modern fast navigation

Discover how to create clear, responsive, and stylish WordPress menus with expert tips and resources.

HomePage-Maxi-Pils

FAQs – Creating a sticky menu in WordPress

What is a sticky menu in WordPress?

How do I create a sticky menu in WordPress without using custom code?

Does the sticky menu work on mobile devices?

Can I add buttons like “Contact” or “Buy Now” in the sticky menu?

Will a sticky menu slow down my site?

My sticky menu overlaps the content and how can I fix it?

What if the sticky menu isn’t showing after setup?

Check that you’ve applied the sticky setting to the correct container or wrapper block. Also, ensure the page has enough scrollable content to trigger the sticky behavior. Preview while logged out to avoid interference from the WordPress admin bar.

Can I hide the sticky menu on certain devices?

How can I style my sticky menu differently when it becomes active?

Is a sticky menu good for SEO?

Author-Kyra

Kyra Pieterse

Author

Kyra is the co-founder and creative lead of MaxiBlocks, an open-source page builder for WordPress Gutenberg.

You may also like