html - Unable to change nav-bar dropdown styles -
i attempting change nav-bar dropdown background color black. trying make dropdown options width of screen.
for reason unable change dropdown background other transparent. tried code below did nothing @ all.
/*-- change navbar dropdown color --*/ .navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu { background-color: #3344ff; color:#ffffff; }
here code:
.navbar-inverse { background: #f8f9fa; border: none; color: black; height: 7em; } .navbar-inverse a{ color: #7b53c1!important; } .navbar-toggle { border: none; background: transparent !important; } .navbar-toggle:hover { background: transparent !important; } .navbar-toggle .icon-bar { width: 25px; height: 3px; transition: 0.2s; background: black !important; margin-top: 25px; } .navbar-toggle .top-bar { transform: rotate(45deg); transform-origin: 10% 10%; } .navbar-toggle .middle-bar { opacity: 0; } .navbar-toggle .bottom-bar { transform: rotate(-45deg); transform-origin: 10% 90%; } .navbar-toggle.collapsed .top-bar { transform: rotate(0); } .navbar-toggle.collapsed .middle-bar { opacity: 1; } .navbar-toggle.collapsed .bottom-bar { transform: rotate(0); } html <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" href="#collapse1" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> <a id='' class="header navbar-brand" href="/"> <p id='maintitle'>jobquiz </p> <!--<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/playbuzz_logo_(2016).svg/2000px-playbuzz_logo_(2016).svg.png' style="width:25x;height:25px;">--> </a> </div> <div id="navbar" class="collapse navbar-collapse" data-target="#collapse1"> <ul class="nav navbar-nav"> <!--<li class="active"><a href="#">home</a></li>--> <!--<li><a href="#about">about</a></li>--> <!--<li><a href="#contact">contact</a></li>--> </ul> <ul class="nav navbar-nav navbar-right"> <li class='headerbtn'> <button id="headerbtn">start quiz</button></li> <!--the if statemnet below along currentuser varriable how we're passing user name navbar--> <% if(!currentuser){ %> <li class='header'> <a href="/login"> sign in</a></li> <li class='header'> <a href="/register"> sign </a></li> <% } else{ %> <li> <a href ="#">signed in as: <%= currentuser.username%> </a></li> <li> <a href="/logout"> log out </a></li> <% } %> </ul> </div> </div> </nav>
bootstrap's specific definition of navbar dropdown element defined here:
.navbar-nav>li>.dropdown-menu
so
.navbar-nav>li>.dropdown-menu { background-color: #3344ff; }
the anchor tags inside drop down defined here:
.dropdown-menu>li>a
so
.dropdown-menu>li>a { color: #fff; }
the bootstrap theme page play around stuff - open dev tools , start changing things.
Comments
Post a Comment