Inheritance css in navbar boostrap

Question

Inheritance css in navbar boostrap

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I need to be able to make a style that makes hover on li of navbar :

<div class="container">
  <nav class="navbar navbar-default navar-fixed-top">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data- target=".js-navbar-collapse">
         <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="#">Legales</a>
    </div>
    <div class="collapse navbar-collapse js-navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown mega-dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="icon-plus2"></span> Menu </a>
          <ul class="dropdown-menu mega-dropdown-menu row">
            <li class="col-sm-3">
              <ul>
                <br><br>
                <center><img src="../resources/image/aegis.png" alt="Aegis" class="img-responsive">
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <!-- ESTOS LI -->
                <li class="dropdown-header">Dresses</li>
                <li><a href="#">Unique Features</a></li>
                <li><a href="#">Image Responsive</a></li>
                <li><a href="#">Auto Carousel</a></li>
                <li><a href="#">Newsletter Form</a></li>
                <li><a href="#">Four columns</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Tops</li>
                <li><a href="#">Good Typography</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <!-- ESTOS LI -->
                <li class="dropdown-header">Jackets</li>
                <li><a href="#">Easy to customize</a></li>
                <li><a href="#">Glyphicons</a></li>
                <li><a href="#">Pull Right Elements</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Pants</li>
                <li><a href="#">Coloured Headers</a></li>
                <li><a href="#">Primary Buttons & Default</a></li>
                <li><a href="#">Calls to action</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <!-- ESTOS LI -->
                <li class="dropdown-header">Accessories</li>
                <li><a href="#">Default Navbar</a></li>
                <li><a href="#">Lovely Fonts</a></li>
                <li><a href="#">Responsive Dropdown </a></li>
                <li class="divider"></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <center><a href=""><span 
    class="icon-exit"></span><label style="margin-top:15px; margin-right: 10px; 
      cursor: pointer; ">C</label></a></center>
        </li>
      </ul>
    </div>
  </nav>

css bootstrap

asked by Juan 08.08.2017 в 16:13

source

2 answers

0

In a .css file you should only place the following:

nav ul li:hover{
    estilo: tuEstilo;
}

answered by 08.08.2017 в 16:28

Problem loading a string with a lot of information in javascript Fit borders in HTML

score 1 · Accepted Answer

It would be enough to add a css class to the elements ul and do:

.menu li a:hover {
   background-color: #ACACAC;
}

An example:

ul.menu {
  list-style-type: none;
}

.menu li a {
  width: 200px;
  padding: 5px 10px;
  display: block;
}

.menu li a:hover {
   background-color: #ACACAC;
}

<ul class="menu">
  <li>Titulo Panel</li>
  <li><a href="#">item A</a></li>
  <li><a href="#">item B</a></li>
  <li><a href="#">item C</a></li>
  <li><a href="#">item D</a></li>
</ul>

If even then you are not taking it as a last resort you could use the !important clause in your CSS even if it is not recommended, it would be:

.menu li a:hover {
   background-color: #ACACAC !important;
}