How To Implement a Sticky Header In WordPress

Sticky Header In WordPress

Have you noticed the menu bar that doesn’t move when you scroll up and down a site? That is a Sticky header. It is one of the most popular design trends that many web designers make use of today to improve user experience on their websites. If you would like to implement a sticky header in WordPress but don’t know how to, here is an article for you.

You will learn what the Sticky header is and how we can create one in WordPress.

Contents:

What Is a Sticky Header?

Sticky header or Sticky navigation bar simply refers to the top navigation menu that remains visible at the top of the screen while users scroll up and down the site.

This navigation tool makes it easy for you or anyone visiting your site to quickly access the menu bar without having to scroll back to the top of the page.

Now that you know what a Sticky header is, how can you create it on your WordPress site? Let’s find out the different ways of doing this.

Side Note: Themes like Asta Pro and GeneratePress come with built-in sticky headers. Using any of these themes will save you the stress of creating one.

Pros

Smooth navigation means a lot to every website owner that means business. This is why sticky headers are in vogue.  They let site visitors move around a site effortlessly. Also, since the menu bar remains in permanent view, they do not have to scroll back each time they need to select an option.  This is even more useful if a page contains lots of content.

Another advantage of the sticker header is the fact that it is time-saving. Modern web developers use it so users can quickly jump to different sections of a site. No unnecessary scrolling.

Also, having a sticky header bar helps you build your brand. How? Your menu bar most likely has your company name and logo. So, putting your sticky logo and company name in front of visitors has a way of registering your brand in their minds.

Cons

One of the common disadvantages of sticky header bars is that it tends to take up some space on the screen. Above all, it cuts out any beautiful background image that you have on the site. This can be solved by having the bar shrink once you have scrolled past.

Another con is that it isn’t always effective on mobile and tablet devices as it can be hard to translate into a mobile format. Also if the design is complicated, it may affect site performance.

How To Implement a Sticky Header in WordPress Using Plugins

Visit your website. Try scrolling down. See that menu bar that just disappeared? That’s what we want to fix.


 

One way you can create a sticky header is by making use of a sticky header plugin. This is actually the easiest way to create a sticky header.

To get started, log in to your WordPress admin panel, go to ‘Plugins >> Add new’. Then, search for ‘Sticky Header (or Anything) on Scroll’.  Click ‘Install’.

After installing, activate the plugin. Once this is done, go back to your site’s frontend and right-click on the header. Click on ‘Inspect’ to open Google inspect. As a result, you’ll have your site’s HTML and CSS layout on your screen.

Side Note: You’ll get the best result with the Google Chrome browser.

 

On the ‘Elements’ tab which has the HTML markups, click on the ‘header id=“site header”’, then on the ‘Styles’ tab which has the CSS styling, click  ‘#site header’ option.

Copy the ‘#site-header’ option and click the ‘X’ button at the right corner of the tab to exit the Google inspect.

 

Go back to your WordPress dashboard and hover your cursor over ‘Settings’ and click on ‘Sticky Menu (or Anything!)’. The plugin has over 100,000 active installations with a 4.9 out of 5-star rating.

In the plugin settings tab, paste what you just copied (from Google Inspect) in the ‘Sticky Element’ input field and save your changes.

plugin settings

Go back to your site’s frontend, scroll to top and bottom of your website, you’ll notice your site’s header now has its position fixed.

Note that there are a couple of other sticky header WordPress plugins you can try like: myStickymenu plugin, Mega Menu, Awesome header, Hero Menu, etc.

How To Implement a Sticky Header in WordPress Using Additional CSS

Aside from using a plugin, you can create an on-scroll fixed header and navigation bar by adding a custom CSS code on your WP site. Yes, coding is involved, but don’t panic.

It is quite easy to do and does not require that much work. However, if you are not comfortable working with codes, stick with the ‘plugin’ method we described above.

To get started using this method, launch your website. Hover your cursor over your menu bar and right-click on it. Select the option ‘Inspect’ at the bottom of the list.

Clicking on this will reveal the ‘Elements’ tab which has the HTML markups and the ‘Styles’ tab which has the CSS styling.

Click on the ‘header id=“site header”’, then on the ‘Styles’ tab go to the ‘#site header’ option. You are going to make a few edits here.

 

Making edits: how to implement sticky headers in WordPress
The first thing you are going to do is uncheck the box next to ‘position: relative;’ and type ‘position: fixed;’ this will cause the header bar to become fixed and sticky.

Next, you’ll have to give it an absolute positioning of where you want it to be. So type:

top:0;’, To stick the bar to the top of the page.

Left:0;’, This will keep the bar at the left-hand side of your screen.

Right:0;’. This will ensure that your header bar spans the full width of the screen.

Note: In CSS, sticky positioning toggles between fixed and relative positioning. This is to say the position of a sticky element is relative to its initial position in the HTML flow until a users scrolls past a specific point. Then, the element sticks and becomes fixed until it gets to the end of the parent elements. So, specifying top, bottom, right, or left, defines the offset point.

 

Google Inspect

Adding only the ‘left’ position will take your menu bar to the left, same with adding only ‘right’. But adding both will give the menu bar a full width.

While editing, note that changes are visible immediately, but the moment you close Google Inspect and refresh, it all goes back to how it was before. This simply means your edits are not saved. So, you need to paste the codes in the theme itself.

Pasting Codes In The Theme To Implement Sticky Header

To do this, highlight the edits you have made from ‘#site- header’ all the way down to ‘right:0;’ and copy the code.

Then, close the tab to exit the Google Chrome Inspect.

Google Inspect: How to implement sticky headers in WordPress

Now, refresh your site and click on ‘Customize’ on your WordPress admin bar or you can go back to your dashboard. Click ‘Appearance’ and select ‘Customize’ from its submenu items.

Editing CSS: Continue

On the customization page, go down to ‘Additional CSS’ and click on it. Once it opens, paste the codes you just copied in the text space.

Additional CSS: How to implement sticky headers in WordPress

Now, you’ll notice a curly bracket ({) beside the ‘#site-header’, make sure to put the second curly bracket (}) at the end of the code.

Editing CSS

You can go ahead and make a ‘title’ for this code to make it easy to find because you may have to write other codes here. To do this type ‘/* fixed header */’. Using this ‘/**/’ will not affect your codes in any way.

Publishing changes

Publish your changes and go back to your site. However, if you do not see results, simply refresh the page. You will surely have a header that sticks to the top.

Success: how to implement sticky headers in WordPress

 

Implement Sticky headers in WordPress

As much as the Sticky header is a great modern design trend, it has its advantages and disadvantages, although the pros are more than the cons. Let us consider them.

Conclusion

Now that you have learned how to implement a sticky header in WordPress, do you think it is necessary for your site?

Well, there isn’t a yes or a no to this question as it all depends on your preference. But, if there is almost no scrolling to be done on the website, then there’s no need for it.

Additionally, before using a sticky header, it would be best to get feedback from your users to know if the feature would be useful to them. And if you need to use it, make sure that it works on all devices. Also, remember to showcase your brand, add a retina logo, optimize for all screen sizes, and add a simple animation effect.

More Resources:

Cover image – www.freepik.com