CODEWITHSUNDEEP
csstwitter-bootstrap
ℕʘʘḆḽḘ
ℕʘʘḆḽḘ

Reputation: 19405

Changing The Color of Active Navigation Bar

I am using a simple bootstrap top fixed navigation bar and I would like to change the color of the active page... however I think something is missing in my code

<div class="navbar">
    <div class="navbar-fixed-top">
      <div class="container" style="width: auto;">
          <div class="nav-collapse" id="nav-collapse">
          <ul class="nav" id="nav">
            <li class="active"><a href="#skdill" >skisll</a></li>
            <li class="active"><a href="#skill">skill</a></li>
            <li class="active"><a href="#research">research</a></li>
            <li class="active"><a href="#">Link</a></li>
                     </ul>
        </div>
      </div>
    </div>
  </div>

and the CSS is

.navbar {
    position: fixed;
    width: 100%;
}
.navbar .nav {
   float: none;
}
.navbar .nav>li {
    width: 25%;
}
.content {
    padding-top: 80px;
}

#nav-collapse li a:hover { 
    color: blue; 
}
#nav-collapse a:hover { 

    background-color: gray; 
}

#nav-collapse  li.active { 
   color:green;
    background-color: yellow; 
}
#nav-collapse  li.active a {
    color: red;
}

... I would like for example the text (of the active navigation item) to be red and the background color to be gray (whatever)... do you have an idea?

Many thanks!

Upvotes: 4

Views: 108229

Answers (4)

as2d3
as2d3

Reputation: 915

I have an answer which is a bit different from other answers and worked very well for me:

Suppose the links in the navbar (on the local server, https://myweburl.com will be replaced by https://localhost:8000 or https://127.0.0.1:8000) are as follows:

Home => https://myweburl.com

Blog => https://myweburl.com/blog/1, https://myweburl.com/blog/2, etc.

Skills => https://myweburl.com/skills/

Contact => https://myweburl.com/contact/

So you can use this snippet to make the respective link in the navbar active:

$(document).ready(function () {
    var loc = window.location.href; // grabbing the url
    var str = loc.split("/")[3]; // splitting the url and taking the third string
    if(str.localeCompare("") == 0)
      $("#home").addClass("active");
    else
      $("#" + str).addClass("active");
});

Also, in your HTML, remove 'active' class and put respective IDs in all the links. By respective IDs, I mean that the ID should be named according to the URL.

What the above JS code is doing: Grabs the URL and splits it into an array of strings. Then it takes the 4th string in variable str (the fourth string will be at the third index). And then, it puts the 'active' class in that link.

The benefit of this method: Apart from the fact that it is very simple, if the user directly goes to the link instead of clicking the link in the navbar then also this method works.

Problem with this method: The URL of every link in the navbar must be known. If the format of the URL is different then a little change in the code can help you.

Upvotes: 1

Derya
Derya

Reputation: 11

This js worked for me, I placed it on each page where navigation is a php include:

 <script>
 $(function() { 

        var path = window.location.pathname;
        path = path.replace(/\/$/, "");
        path = decodeURIComponent(path);

        $(".nav li a").each(function () {
            var href = $(this).attr('href');
            if(path.substring((path.lastIndexOf('/')+1),path.lenght) === href) {    
                $(this).closest('li').addClass('active');
            } else {
                $(this).closest('li').removeClass();
            }
        });         
 });

Upvotes: 0

Marcos
Marcos

Reputation: 4653

If you want to keep the state of the active item then you need to include the navbar layout in every html file. For example if you click on Research then in the research.html your navbar must be

<div class="navbar">
<div class="navbar-fixed-top">
  <div class="container" style="width: auto;">
      <div class="nav-collapse" id="nav-collapse">
      <ul class="nav" id="nav">
        <li ><a href="#skdill" >skisll</a></li>
        <li ><a href="#skill">skill</a></li>
        <li class="active"><a href="#research">research</a></li>
        <li ><a href="#">Link</a></li>
                 </ul>
    </div>
  </div>
</div>

And so on for all your links.

EDIT You can use JavaScript and do the trick:

<!DOCTYPE html>
<html>
   <head>
     <script src="js/jquery.min.js"></script>
     <script src="js/bootstrap.min.js"></script>
     <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
     <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
     </style>
  </head>

  <script>
     $(function() {
        $('#nav li a').click(function() {
           $('#nav li').removeClass();
           $($(this).attr('href')).addClass('active');
        });
     });
  </script>

  <body>
     <div class="navbar">
        <div class="navbar-fixed-top">
           <div class="container" style="width: auto;">
              <div class="nav-collapse" id="nav-collapse">
                 <ul class="nav" id="nav">
                     <li id="home"><a href="#home">Home</a></li>
                     <li id="skill"><a href="#skill">Skill</a></li>
                     <li id="research"><a href="#research">Research</a></li>
                     <li id="link"><a href="#link">Link</a></li>
                 </ul>
              </div>
           </div>
        </div>
     </div>
  </body>
</html>

Demo: http://jsfiddle.net/Ag47D/3/

Upvotes: 8

Miljan Puzović
Miljan Puzović

Reputation: 5820

.navbar #nav > .active > a {
    color: red;
}

Here is DEMO

Upvotes: 1

Related Questions