Creating a sticky header menu in WordPress with Full Site Editing
This guide demonstrates how to implement a sticky header using Full Site Editing (FSE) in WordPress, with a focus on the MaxiBlocks Go theme. We'll also cover an alternative method for creating a sticky navigation menu using MaxiBlocks.
Method 1: Full Site Editing with MaxiBlocks Go theme
Access the Site Editor
1. In your WordPress dashboard, go to Appearance > Site Editor
2. Confirm you're using the MaxiBlocks Go theme for FSE capabilities
Open the Styles panel
1. Click Styles in the left sidebar
2. Select the three dots (⋮) icon at the top right
3. Choose Additional CSS
Add sticky header CSS
Insert this code into the Additional CSS field:
header {
position: sticky;
top: 0;
z-index: 999;
}
This CSS ensures the header remains visible at the top of the viewport during scrolling. The `z-index` value may need adjustment to resolve conflicts with other elements.
Save and test
1. Click Save to apply the custom styles
2. Open an Incognito Browser Window of your page and scroll to confirm the sticky header functionality
Method 2: Creating a sticky menu with MaxiBlocks (no FSE)
Tip: Use this method for single-page websites or landing pages where the menu is only used once, i.e. no global menu is needed for multiple pages.
Locate the menu container
Select the element containing your navigation items, typically labelled MaxiBlocks Menu Container
Access Advanced Settings
Find and open the Advanced Settings panel
Set position to sticky
Under Position settings, change from default to Sticky
Configure sticky settings
Set the Top value to 0 to anchor the menu to the top of the viewport
Finalise and verify
1. Save your changes
2. Preview the site as a logged-out user to avoid admin bar interference
3. Refresh the page and scroll to test the sticky menu behaviour
Best practices and considerations
- Test your sticky header/menu on various devices and screen sizes to ensure compatibility
- Consider using a slight background blur or opacity change on scroll for improved readability
- Ensure the sticky element doesn't occupy too much vertical space on mobile devices
- Implement smooth transitions for a polished user experience
Troubleshooting
- If the header disappears behind other elements, increase the `z-index` value
- For performance, use `position: sticky` instead of JavaScript-based solutions where possible
- If the sticky behaviour doesn't work, check for conflicting CSS or JavaScript in your theme or plugins
Both methods enhance user experience by maintaining easy access to navigation elements. Choose the approach that best aligns with your site's design and functionality requirements.
More on MaxiBlocks menus
Creating a Simple Navigation Menu
Add and Manage Submenus in Your WordPress Navigation with Gutenberg
Customizing the Appearance of Your Navigation Menu
10 Crucial Elements of an Effective WordPress Navigation Menu
The Evolution of Website Navigation from Text Links to Dynamic Menus
How to Design Responsive Navigation Menus for Mobile Devices
Maximizing User Experience with Intuitive Navigation Structures
The Psychology Behind Navigation Menu Design
Customizing WordPress Navigation Menus
The Role of Mega Menus in Enhancing E-commerce Websites
Making Navigation Menus Accessible
Navigation Menu Trends: Past, Present, and Future Insights
Intuitive Navigation Structures
Best Practices for Using Dropdown Menus
Innovative Navigation for Modern WordPress Websites