Steps to Create Show Hide Sticky Menu on Scroll in WordPress

You may have seen many modern websites and premium WordPress themes make the header fixed show/hide when you scroll up/down. Its look beautiful navigation menus are displayed on top. This feature is very useful for a website and more so for a long post or page, A quick navigation option for users adds to the user experience. You will also get to know how to do this in your WordPress site without a plugin, I am researching these types of tricky things, do with WordPress Website.

Sticky navigation menus consistent can take the user experience of your WordPress site to the subsequent level. it’s an important part of a website site that permits web visitors to navigate through your pages, with none distraction. This not only improves the usability and accessibility of an internet site but also helps you generate quality of your website.

Steps to Create Show Hide Sticky Menu on Scroll in WordPress

Why Create Show/Hide Sticky Menu on Scroll

  • Quicker and Easier to Navigate: On scroll show/hide Sticky menus allow visitors to navigate through your web pages quickly and easily. If your website article has more than 2,000 to or more words, that means user or visits visit the website and read whole informative with scroll, after user wants to navigate the menu, if the website has this function they can instantly scroll up once appear menu bar their mouse on the menu and click on the link they want to visit on your site. This encourages the visitor to stay longer, which, automatically improves user engagement and conversions on your WordPress site.
  • Helps in Reducing the Bounce Rate: A simple, clean, and easy-to-navigate menu can automatically reduce the bounce rate of a site. With the help of sticky navigation.
  • Improves Brand Awareness: Use the sticky navigation to display your logo or any other visual content in the header that can boost the brand awareness of your business.

Step-by-Step Guide to Create Show/Hide Sticky Menu on Scroll Up/Down

As you might have understood, the sticky menu is a menu that follows you while you are scrolling up/down the page. That being said, you are able to see the nav panel as you scroll up, otherwise, on the scroll down nav menu cant appear on the page.

In this tutorial, we’ll create a sticky menu show when you scroll up viewport, but so that it doesn’t interfere with the content, we’re going to hide the menu when the user scrolls down the page. Here’s what it’s going to look like when we’re done. – Okay then, let’s start:

Steps to Create Show Hide Sticky Menu on Scroll in WordPress

Step 1 – Inspect Find Header Section

Right-click on any webpage, click inspect, its source code, the pictures, HTML and CSS that form its style, the Javascript code that powers animations, and more, first open website and find the whole section which inside the menu “header”, just get reference bellow image:

Inspect & find the section which inside the menu header

Now, you find the ‘div’ or ‘header’ section, on the same section check which ‘id’ or ‘class’ inside or start. Remember one thing, id or class must be unique (not use the same id or class, on this page), this can be unique.

If you find the same id or same class more then one, do this step or skip this step if unique, make it new class (any name you like it) add to your theme header.php file and save. Dashboard Login → Appearance → Theme Editor → header.php ; here you can find the menu bar section and add unique class name (any class name you want, must be unique).

Step 2 – Add jQuery Code

Well, now we experiment this code with a header section, where you choose the id or class name, now you add code inside theme folder footer.php (Dashboard Login → Appearance → Theme Editor → footer.php) Paste this jQuery code into last closing tag:

Add code inside theme folder footer
<script>
(function($) {
jQuery(window).load(function(){	

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {	
	if($(window).scrollTop() > 10){		
		var currentScrollPos = window.pageYOffset;
	if (prevScrollpos > currentScrollPos) {	
	
// $(".site-header").css('top','0');       // activate this if theme menu like news/ magazines (mega menu type);
$(".site-header").css('position','fixed');
$(".site-header").css('z-index','999');
// $(".site-content").css('padding','105px 0');	   // main content layout section after menu replace unique class or id
$("#masthead").addClass("nav_hi_"); //add unique id/class hear (if id start with '#' or class start with '.');
$(".site-header").addClass("menuset_");

	} else {
	// $(".site-header").css('top','50px');            // activate this if theme menu like news/ magazines (mega menu type);
	$(".site-header").css('position','');
	// $(".site-content").css('padding','');       // main content layout section after menu replace unique class or id
	$("#masthead").removeClass("nav_hi_"); //add unique id/class hear (if id start with '#' or class start with '.');
	$(".site-header").removeClass("menuset_");	
	}
	prevScrollpos = currentScrollPos;
}
else{
	$(".navbar-main").css('top','');
	$(".navbar-main").css('position','');
	$("#nav-down").removeClass("nav_hi_");
	$(".navbar-main").removeClass("menuset_");
}	
}	
});
}(jQuery));
</script>

Step 3 – Connect jQuery with Menu

Now, replace some code inside jQuery just paste it your footer.php file, find this code ‘#masthead’ replace with you choose in the first step (id/class or create a unique class on header.php). If you already have unique id then replace it on ‘#masthead’. For reference check image below:

Find this code and replace with your website id or class

Step 4 – Check function Working Correctly or Not

Nice, you follow this above 3 steps, now the time is check, we recently paste the jQuery code inside the footer.php file and replace some code, it makes connect site header section menu with jQuery script. Refresh your website and check scroll down menu bar hide a while and just scroll up menu bar is visible.

Now scroll up/down function works great same time show/hide nav menu, we just through this step, that our jQuery connect header menu or not, after we remain one thing the page main content area section, which we will discuss next steps.

If not work, you check the id/class, just you replace, the main problem is not connected properly, now you stop right here, now you can follow all above steps one more time, with some jQuery code, it works perfectly I am using this script on Blog TECHboto.

Step 5 – Find Main Page Content Section

At the same function, you must know your web page content area, where starts just after the header menu. Now, you activate the inspect option on the browser, open the website, and find the whole content, just get the reference bellow image.

Find the main content id or class

Just need this page main content section which content inside page class or id, remember one thing id/class should be unique. Some reason id or class not as unique, that reason you add manually class inside header.php file (where main page content section).

Step 6 – Replace site-content with Page Main Content class/id

let’s do the last step, already provide the jQuery code into footer.php file, simply find code ‘.site-content’, replace code with just finds step 4 replace with this.

Replace site-content with Page Main Content class or id

Creating this Show/Hide Sticky Menu on Scroll animated header menu with jQuery properties. We hope this article helped you add a sticky show/hide floating navigation menu to your WordPress site.

Note: After complete all steps, code and function work properly show/hide sticky menu on a scroll, just do a small thing, but not recommended, this jQuery code you edit and connecting with your website header area also page main content, this code paste into a .js file. It shows your website clean code.

If you liked this article, You can also find us on Twitter or Facebook.

1 Comment

  1. Hello,Dipankar Baidya

    How to fix the following would be very useful if you give a post.

    1.Optimal Use of Keywords in Header Tags

    2.Keyword Placement in Page Title

    3.Keywords in Image Alt Attribute

    I hope to see the post in 1-2 days. I’ll be waiting

Leave a Reply

Your email address will not be published. Required fields are marked *