twitter bootstrap - Change color of divider/text in dropdown menu/collapsed, How do i change them independently of each other in CSS -
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
Post a Comment