twitter bootstrap - Change color of divider/text in dropdown menu/collapsed, How do i change them independently of each other in CSS -


my picture

in picture on left side collapsed dropdown menu, have white divider line, have white divider line in dropdown menu, , want divider in dropdown menu black divider line, , still keep white divider line in collapsed dropdown menu. how change them independently of each other in css?

.navbar-header { 	padding-bottom: 45px; }  .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {   color: #fff;   background-color:transparent; }  .nav>li {   position: relative;   display: block;   box-sizing: border-box;   color: rgb(51, 51, 51);   font-family: oswald, 'open sans', sans-serif;   font-size: 14px;   list-style-image: none;   list-style-position: outside;   list-style-type: none;   text-align: left;   text-transform: uppercase; }  .dropdown-header  {   list-style: none;   font-size: 14px;   }  .navbar-inverse .navbar-collapse  {   max-height: none; }  .navbar-inverse .navbar-nav>li>a   {   color: #fff;   font-weight: 500;   text-transform: uppercase;   font-family: oswald, "ms serif", "new york", serif;   font-size: 14px; }  .navbar-nav>li>a {   padding-top: 2px;   padding-bottom: 2px;   line-height: 20px; }  .nav>li>a {   position: relative;   display: block;   padding: 10px 10px; }  .navbar-inverse .navbar-nav>.active>a, .navbar-inverse {	   color: #82c332;   font-weight: 500; }  .navbar-inverse .navbar-nav .dropdown-menu .divider {   background-color: #000; }  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {   background-color: #fff; }  .open .dropdown-menu>li>a {   color: #000; }
 <div class="navbar navbar-inverse navbar-fixed-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="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="#"><img src="img/logo/servicepc-logo1.png"></a> 			</div> 			 			<div class="navbar-collapse collapse">           <ul class="nav navbar-nav navbar-right"> 		   <li class="active"><a href="#">forside</a></li>                  <li class="dropdown">           <a href="#" class="dropdown-toggle" data-toggle="dropdown">service <b class="caret"></b></a>          <ul class="dropdown-menu"> 			   <li class="dropdown-header"><a href="#">alle reparationer</a></li>                <li class="divider"></li>                <li><a href="#">computer reparationer</a></li>                <li><a href="#">backup</a></li>                <li><a href="#">virus fjernelse</a></li>                <li><a href="#">backup</a></li>                <li><a href="#">data recovery</a></li>                <li><a href="#">rensning pc (støv)</a></li>                <li><a href="#">geninstallering af system</a></li>                <li class="divider"></li>                <li class="dropdown-header"><a href="#">info</a></li>                 <li><a href="#">portfolio 1</a></li>                <li><a href="#">portfolio 2</a></li> 		</ul> 		  </li>           	 <li><a href="#priser">priser</a></li>              <li><a href="#about">om os</a></li> 			<li><a href="#">kontakt</a></li> 		</ul>	 	</div>    </div> </div>

i hope understand mean.

kind regards

thomas

in html file, give second divider class name of divider2.

<li><a href="#">geninstallering af system</a></li> <li class="divider2"></li> <li class="dropdown-header"><a href="#">info</a></li>  <li><a href="#">portfolio 1</a></li> <li><a href="#">portfolio 2</a></li> 

and in css file, create class variable follows :

.divider2 {     background-color: black; } 

Comments

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

Kivy: Swiping (Carousel & ScreenManager) -