How To Highlight the Current Active Page Link in Sidebar

If you want to add active class to sidebar of your website, in other words, if you want to highlight the current active page link in the sidebar of your website or blog, 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 sidebar of your website.

You can do this by adding 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.

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:

Download the below script, then go to settings → Insert Headers and Footers

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

      $(document).ready(function(){
 		  var str=location.href.toLowerCase();
        $('.side_b_nav li 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('span')){
            $(this).addClass("highlight"); 
            }							  
                          });
     })
</script>

<style>

li.highlight {
 background: #37a000;
}

li.highlight a {
 color: #fff;
}

li.highlight a:hover {
 background: #37a000;
 color: #fff;
}

.side_b_nav a{
 color: #000;
}

.side_b_nav {
  overflow: auto;
  font-weight: bold;
  text-align: center;
}

</style>

Click here to download this script.

Step 3:

Install the PHP Code Widget plugin, then go to Appearance → Widgets,

and add “PHP Code” widget to sidebar.

Step 4:

Now add your links to sidebar in the below format.

<ul class="side_b_nav">

 <li><a href="index.html">Home</a></li>
  
 <li><a href="contact.html">Contact Us</a></li>
 
 <li><a href="about.html">About</a></li>
 
 <li><a href="privacy-bolicy.html">Privacy Policy</a><li>
 
 
</ul>

i.e., cover all your links by  <ul> tag and give side_b_nav name to its class, then cover each link by <li> tag.

Now if the current visited link will available in your sidebar, it will be highlighted.

You can change the class name or tags according to you, but it is necessary to use the same tag and class name in both Css and JavaScript code.

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.
Yes2
No0
Powered by WebPlover

Leave a Comment

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