Want to add a sticky header to your website?
By the end of this guide, you will know how to implement a sticky header on your WordPress site using any of the 3 methods below.
Hereβs what we will explore:
What a sticky header is Use Elementor to create a sticky header A plugin and themes that can help Ready? Letβs begin!
A sticky header, also known as a persistent header, is a common web design element that stays fixed at the top of the webpage as the user scrolls down.
It provides constant access to the websiteβs navigation, search, and other key features, and is particularly useful on websites with long content.
Their ability to improve the ease of use, coupled with their aesthetic appeal , makes them a popular choice among modern web developers and designers.
There are three simple ways to create a sticky header in WordPress:
Through Elementor Through the βMy Sticky Barβ plugin Through a WordPress theme with this feature Method 1: Use Elementor
To create a sticky header using Elementor, follow these simple steps:
Step 1: Edit the container
If youβre here looking, I assume that youβre already familiar with Elementor and how to use it, and its theme builder feature.
But anyway:
Open the header template Hover over the containerClick the edit container button It should look something like this now:
After you click the button, the panel on the left side should change to that containerβs layout (or style) settings.
Step 2: Enable the sticky option
From there, go to the advanced tab and do the following:
Open motion effects Click the sticky dropdown Select the top option You can also choose the devices you want your sticky header to appear on.
From there, donβt forget to click the update button .
β οΈ Note : You will need Elementor Pro
Itβs also important to consider the foundation that supports your siteβs performance and reliability β your web hosting service.
This is where Hostinger steps in, offering an exceptional hosting solution for WordPress users.
Discover the Hostinger advantage for your WordPress site:
Enjoy a 99.9% uptime guarantee Affordable pricing at just $2.49/month (use the code darrel10 to get a discount) Global performance and reach with Hostingerβs optimized hosting platform With Hostinger, youβre not only choosing a hosting provider:
Youβre ensuring that your WordPress site runs smoothly, reliably, and at peak performance.
Method 2: My Sticky Bar
Another way to create a sticky header is through the My Sticky Bar plugin in WordPress.
Step 1: Install and activate the My Sticky Bar plugin
My Sticky Bar is available in the WordPress plugin repository, so all you have to do is install and activate it from there.
From the WordPress dashboard:
Go to plugins > add new plugin Search for the My Sticky Bar pluginInstall and activate the plugin Once installed, you will be redirected to the plugin dashboard.
From there, go to the sticky menu settings and enable the sticky menu feature.
Then do the following:
Select other class or ID under the sticky class section Add the class or ID of the header Hereβs an example:
β οΈ Note : To quickly find your headerβs ID/Class, install CSS Peeper as a Chrome extension or you can use the browserβs inspect tool.
From there, adjust any desired settings to match your websiteβs design and branding, such as background and opacity.
Once youβre done, donβt forget to scroll down and click the save buttonβ ββand then refresh your website to see the changes.
By the way, if you donβt want to use this plugin, you can use another sticky header plugin. There are a few similar WordPress plugins available.
Method 3: Install a theme with this feature
If you havenβt started your website yet, it might be easier to start with a WordPress theme that supports this feature.
Here are some of the themes with a sticky header feature:
1. Flatsome
Flatsome extensive customization options , including the ability to create a sticky header.
Flatsomeβs sticky header feature is highly customizable, which allows you to adjust it to suit your websiteβs design and functionality needs.
π Related : Flatsome Theme Review: Still Good Fit For Your Store?
π» Key features
Header Designer : Flatsomeβs header designer provides a drag-and-drop interface for creating and customizing your websiteβs header.Responsive Design : The theme offers a responsive design to ensure that your website, including the sticky header, looks great on any device.Customizability : The sticky header can be customized to include your company logo, search bar, and main navigation.
π° Pricing
This comes with future updates and 6 months of support from its creators (can be extended to 12 months for a fee).
2. Woodstock
The Woodstock theme modern, fully responsive, and retina-ready WooCommerce theme.
The theme is compatible with WordPress 6.x and WooCommerce 8.x, and offers a range of features to enhance user experience and your websiteβs functionality.
π» Key features
Fully Responsive Design : The Woodstock theme adjusts its layout based on the screen size and resolution of the device itβs being viewed on.Retina Ready : The theme is 100% retina ready, which makes it look crisp and beautiful on high-resolution screens.Β Header Customization : You can choose to show or hide the logo, upload a logo image, enable the sticky menu, and adjust the display width.Β
π° Pricing
This comes with future updates and 6 months of support from its creators (can be extended to 12 months for a fee).
3. X Theme
The X Theme highly versatile, best-selling multi-purpose WordPress theme.
Itβs known for its extensive pre-built layouts and configurations, as well as an impressive front-end page builder tool.
π» Key features
Customizability : The X Theme is highly customizable, which includes the ability to customize the sticky header, among other elements.Β Integration with Page Builder : The X Theme is deeply integrated with a page builder, Cornerstone, which allows users to create and customize their website layouts with ease.Responsive Design : The X Theme ensures that your sticky header and entire website layout provide an optimal viewing experience for all users.
π° Pricing
This comes with future updates and 6 months of support from its creators (can be extended to 12 months for a fee).
Creating a responsive and well-designed sticky header for your WordPress website can significantly enhance user navigation and engagement.
Always make sure to preview your changes across different devices and browsers to ensure that the sticky header behaves as expected.
Besides the steps I included here, you can actually use a custom CSS code on the header elementβββbut thatβs a little advanced.
Donβt forget to test your sticky header on different devices and browsers to ensure it works as intended. π
Wrapping up, remember the importance of keeping your siteβs design fresh and up-to-date.
Darrel Wilson presents an enticing offer to simplify this process with premium Elementor template kits.
Secure lifetime access to all premium Elementor template kits:
Get lifetime access to all premium template kits designed for Elementor Complete with 2 years of dedicated support Only for $99βββthatβs already for the lifetime access Embrace this opportunity to elevate your websiteβs design with Darrel Wilsonβs premium Elementor template kits.
Keep your site at the forefront of modern web design without the hassle of frequent updates or high costs.
