html - boostrap menu active page dont show style -
so want active page use same settings hover settings. no matter how change css cant work... long time since i've worked on page tho might missing 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>
according html code. a
tag has active class. should .navbar-default .navbar-nav>a.active,
instead of .navbar-default .navbar-nav>.active>a
.
important note
whereas, bootstrap states active class should toggle on li
element not on a
tag. please have following link right html. https://getbootstrap.com/examples/navbar/
eg:
<li class="active"><a href="contact.php" >contact</a></li>
Comments
Post a Comment