bountrap menü aktive seite dont show style

Question

Also ich möchte die aktive Seite die gleichen Einstellungen wie die Hover-Einstellungen verwenden. Egal wie ich die CSS ändern kann ich nicht damit es funktioniert ... lange Zeit, da ich auf dieser Seite gearbeitet habe tho so könnte ich etwas einfach Scheiße fehlt ...

Style.css vor Änderungen

.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; 
} 

Menü

<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 1

Nach Ihrem HTML-Code. a Tag hat aktive Klasse. Also sollte es .navbar-default .navbar-nav>a.active, statt .navbar-default .navbar-nav>.active>a sein.

Wichtiger Hinweis

während Bootstrap-Staaten, die aktive Klasse Toggle auf li Elemente nicht auf a Tag sein sollte. Bitte schauen Sie auf folgenden Link, um das richtige HTML zu erhalten. https://getbootstrap.com/examples/navbar/

zB:

<li class="active"><a href="contact.php" >Contact</a></li> 

Answer 2

nun als Antwort: Sie sind in der Tat einige einfache Scheiße fehlen, die li die .active Klasse haben wird, so fügen Sie diese auf alle Ihre Hover-Effekte: .navbar-default .navbar-nav>li.active>a