Wordpress Farbe ändern Hintergrund der aktiven und schweben li

Question

Navbar > li > a funktioniert nicht in meinem WordPress. Ich habe versucht, #nav > li > a zu verwenden, um die Farbe und den Hintergrund seiner li zu ändern.
Und mein Hauptproblem ist, dass ich die Klasse aktiv von meinem Heimatlink nicht ändern kann, kann jemand eine Probe auf, wie man dies ändern?

Code ist hier vielen Dank!

<nav class="navbar navbar-default" role="navigation" id="nav"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
        data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="<?php echo home_url(); ?>"> 
       <img src="http://conlinscoffee.com/wp-content/uploads/2017/05/conlins_logo.png" 
        class=" img-responsive" alt="logo"> 
      </a> 
     </div> 
     <?php 
     wp_nav_menu(array(
      'menu'    => 'primary', 
      'theme_location' => 'primary', 
      'depth'    => 2, 
      'container'   => 'div', 
      'container_class' => 'collapse navbar-collapse', 
      'container_id'  => 'bs-example-navbar-collapse-1', 
      'menu_class'  => 'nav navbar-nav', 
      'fallback_cb'  => 'WP_Bootstrap_Navwalker::fallback', 
      'walker'   => new WP_Bootstrap_Navwalker()) 
      ); 
     ?> 
     <div class="pull-right" id="searchbar"> 
      <?php dynamic_sidebar('top-menu'); ?> 
     </div> 
    </div> 
</nav> 

Answer 1

können Sie folgende CSS für dieses

#bs-example-navbar-collapse-1 li > a { 
    // your css here 
} 


#bs-example-navbar-collapse-1 li:hover > a, 
#bs-example-navbar-collapse-1 li.current_page_item > a { 
    // your css here 
} 

Oder Sie können

#menu-main_menu > li > a { 
    color: #fff; 
} 

#menu-main_menu > li:hover > a, 
#menu-main_menu > li.current_page_item > a { 
    color: #c42027; 
    background-color: #fff; 
} 

Answer 2

.navbar-default .navbar-nav li>a:hover{color:#fff;} 

Answer 3

versuchen so etwas verwenden:

.className li:hover{ 
//set background color for li here. 
//background-color: #fff; 
} 

.className li:hover > a{ 
//set color for the text here. 
//you can set the color of text like here. 
color: #000 !important; //you can use any color, just use !important keyword for replacing inherited colors. 
} 

// Entschuldigung, ich habe nicht genügend Reputation für Kommentare.

Answer 4

Ändern Sie nicht die li's selbst.

Mit diesem Selektor

.navbar-nav > li > a { background: white; }

Weißer Hintergrund ist eine Probe

Für aktive, fügen Sie einfach: aktiv wie so

.navbar-nav > li > a:active { background: white; }

Sie können auch wichtige hinzufügen wie folgt wenn immer noch nicht funktioniert

.navbar-nav > li > a:active { background: white!important; }

Answer 5

Es gibt kein Problem mit dem aktuellen CSS für die Menüelemente auf Ihrer Website. Das Problem, das auftritt, wird von Ihrem nav-Tag verursacht. Insbesondere haben einen Blick auf diese Codezeile in Ihrem style.css:

#nav { 
    background: #c42027; 
    border: none; 
    box-shadow: none; 
    margin: 0 auto; 
    margin-top: 0px; 
    margin-bottom: -20px; 
} 

Die margin-bottom Regel die div direkt nach dem nav-Element verursacht die Listenelemente zu gehen und decken damit sie verhindern, dass Arbeits mit schweben. Ändere den #nav-Rand-Boden auf 0 und das Problem wird gelöst.