How to set Bootstrap navbar as Active for ASP.NET Site Master

Hmm.. It’s May 1st, 2016 and John Snow finally breathes again!!

Coming back to reality, I have faced a small problem earlier today with Bootstrap. I have a small ASP.NET web site, which uses a Master page (Site.Master). And I have added a Navbar in the master page so that it can be utilized from every pages that will be using the Site.Master.

Here is how my Navbar section looks in the Site.Master Page:

<div id="navbar" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="~/">My Demo Site</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
	<li><a href="~/">Home</a></li>
	<li><a href="~/DemoPage1.aspx">Demo 1</a></li>
	<li><a href="~/DemoPage2.aspx">Demo 2</a></li>
	<li><a href="~/DemoPage3.aspx">Demo 3</a></li>

Very Basic.. Ha!

And now, I want to set the Nav class as Active for the pages I visit. As an example, if I go to Demo 1 page, then the Demo 1 Nav should get the active class turned on, For Demo 2, Demo 2 page should be active..

i.e. I want to set the class as ‘active’ to my navbar depending on the page I am on, dynamically.

After checking many useful postings through Google, I have found the following one as workable in my case:

$(document).ready(function () {
            var pageName = window.location.pathname;
            var newPageName = pageName;

            if (pageName.indexOf('/') == 0) {
                newPageName = pageName.substring(1, pageName.length);

                $.each($('#navbar').find('li'), function () {
                    var hrefVal = $(this).find('a').attr('href');

                    if (hrefVal.indexOf(newPageName) >= 0) {


I have added this code in my Site.Master page and it worked like a Charm!! Kudos to Harry Potter 🙂

2 thoughts on “How to set Bootstrap navbar as Active for ASP.NET Site Master

    • I know it’s toooo late for reply, but I would suggest to debug the code to make sure the script is able to detect the current page properly. Add alert messages or console.log for debug.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s