per källström per källström - 4 months ago 12
CSS Question

boostrap menu active page dont show style

So I want the active page to use same settings as the hover settings. No matter how I change the css I cant get it to work... long time since I've worked on this page tho so I might be missing some easy shit...

Style.css before changes

.navbar-default .navbar-brand {
color: #fff;
border-left:solid;
border-right:solid;
border-top:none;
border-bottom:none;
border-color:#202020;
border-width:0.1pt;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #fff;
border-left:solid;
border-right:solid;
border-top:none;
border-bottom:none;
border-color:#707070;
border-width:0.1pt;
background: -webkit-linear-gradient(top, rgba(112, 112, 112, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to bottom, rgba(112, 112, 112, 1) 0%, #404040 20%);
}
.navbar-default {
font-size: 14px;
background-color: rgba(0, 0, 0, 1);
background: -webkit-linear-gradient(top, rgba(112, 112, 112, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to bottom, rgba(112, 112, 112, 1) 0%, #202020 20%);
border-width: 0px;
border-radius: 0px;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
background-color: rgba(0, 0, 0, 1);
background: -webkit-linear-gradient(top, rgba(112, 112, 112, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to bottom, rgba(112, 112, 112, 1) 0%, #202020 20%);
border-left:none;
border-right:solid;
border-top:none;
border-bottom:none;
border-color:#202020;
border-width:0.1pt;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #fff;
background-color: rgba(255, 255, 255, 1);
background: -webkit-linear-gradient(top, rgba(112, 112, 112, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to bottom, rgba(112, 112, 112, 1) 0%, #404040 20%);
border-left:solid;
border-right:solid;
border-top:none;
border-bottom:none;
border-color:#707070;
border-width:0.1pt;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #fff;
background-color: rgba(231, 231, 231, 1);
}
.navbar-default .navbar-toggle {
border-color: #ddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #ddd;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #888;
}
.navbar-default .navbar-toggle:hover .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #000000;
}
.navbar-default .navbar-right>li>a {
border-left:solid;
border-width:0.1pt;
border-color:#202020;
}


Menu

<div class="navbar navbar-default navbar-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.php" class="navbar-brand">Per Källström</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Comming soon</a></li>
<li><a href="#">Comming soon</a></li>
<li><a href="contact.php" class="active">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="admin.php">Admin</a></li>
</ul>
</div>
</div>
</div>

Answer

Now as an answer: You are indeed missing some easy shit, the li will have the .active class, so add this to all your hover effects: .navbar-default .navbar-nav>li.active>a