Navbar - how to underline or change color active link?

Question

i have navbar. I would like underline link in menu which is active. How do that?

 .nav a:active { text-decoration: underline; } .nav a:active { background-color: red!important; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-header"> <a class="navbar-brand" href="/">info</a> </div> <ul class="nav navbar-nav"> <li><a href="/main">Main site</a> </li> <li><a href="/login">/login</a> </li> <li><a href="/first">/first</a> </li> <li><a href="/second">/second</a> </li> <li><a href="/third">Sport</a> </li> <li><a href="/fourth">fourth</a> </li> </ul> </nav>

But it does not work. I search similar topics but i didn't find good solution for it.

Answer 1

I think your code will already change the active color. But I believe you're thinking of the active element of bootstrap.

The CSS :active selector is used when you want to change the feature of an element when you click it (can see the effect when you click and hold). In bootstrap by adding,

class="active"

The styles on the element will shift depending on what page your on. See how I modified the CSS? This will change the background of the active element for whatever page you are on.

 .nav a:active { text-decoration: underline; } .nav a:active { background-color: red !important; } /* Notice how we added an id? This let's us be more specific and override the bootstrap selector */ .navbar > #my-nav > .active > a { background-color: red; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-header"> <a class="navbar-brand" href="#">info</a> </div> <ul id="my-nav" class="nav navbar-nav"> <li class="active"> <a href="#">Main site</a> </li> <li> <a href="#">login</a> </li> <li> <a href="#">first</a> </li> <li> <a href="#">second</a> </li> <li> <a href="#">Sport</a> </li> <li> <a href="#">fourth</a> </li> </ul> </nav> <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Side Notes : The background won't change until you have your site up with different pages to go to. For instance you would change,

<li class="active"> <a href="home.html">Main site</a> </li>

Then whenever you clicked on it from another page, it would change the background to red.

Answer 2

You need to work with php in order to get what you want.

first give every page a name:

<?php $page='home'; ?>

then go to your navigation and add the following to your navigation

 <li><a <?php if($page == 'Home') {echo 'class="active"';} ?> href="index.php">Home</a></li>

last make a class in ur css with the name active and style it

.active{
text-decoration: underline;
}

this should do the trick