How To Highlight the Current Active Page Link in Navigation Menu

If you want to add active class to your website, in other words, if you want to highlight the current active page link in your website or blog menu, then this tutorial is for you.

Because in this tutorial i will teach you, how can you highlight the current active page link in the navigation menu of your website.

You can do this to add custom code (Css & JavaScript) to your website.

If you’re using WordPress then you can add the code through plugin, otherwise you can add the code manually to your website.

Video Tutorial

So if you want to do this, then follow the steps.

Step 1:

First of all WordPress users download Insert Headers and Footers plugin, and activate it.

Step 2:

Now you have to find the class of navigation menu in your WordPress theme, because there are different classes in different themes, therefore you have to find the class of the navigation menu in your theme.

For this, go to home page of your site and enter the view-source: before the URL, or right click on mouse and click on the view page source, to view the source code of your site.

For example view-source:https://www.webplover.com

add active class to navigation menu

Now press Ctrl+F to find in page, and search for <nav , copy the <nav> tag class name or copy the <div> tag class name, which will before the menu <ul> tag, as mentioned in the screenshot.

Step 3:

Now replace the menu-menu-p-container with your class name, which you have copied, in the below script.

<script src="https://code.jquery.com/jquery-latest.js">

</script>

<script>

    $(document).ready(function(){
 		  var str=location.href.toLowerCase();
        $('.menu-menu-p-container a').each(function() {
                if (str.indexOf(this.href.toLowerCase()) > -1) {
            $("li.highlight").removeClass("highlight");
                        $(this).parent().addClass("highlight"); 
                   }
              	 							}); 
    $('li.highlight').parents().each(function(){
                          
          if ($(this).is('li')){
            $(this).addClass("highlight"); 
            }							  
                          });
     })
     
     </script>
     
<style>
li.highlight {
 background:#37a000;
}

li.highlight a {
 color:#fff !important;
}

li.highlight a:hover {
 background:#37a000;
 color:#fff !important;
}
</style>

Click Here to Download this Script

Then go to settings → Insert Headers and Footers

and paste the script in ‘Script in Header’ section. Then save it.

You can change the link and background color according to you by changing the #37a000 and #fff in the above script.

Now if you have any questions, don’t hesitate to let me know through comment or email, i will try to help you.

Here are a few guides for you to read next:

If you find this article helpful, then please Subscribe to our YouTube Channel for video tutorials, and share this article on social media.

Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes0
No0
Powered by WebPlover

2 thoughts on “How To Highlight the Current Active Page Link in Navigation Menu”

Leave a Comment

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