I'm currently facing an issue with changing the background color of my nav-bar dropdown to black, as well as adjusting the width of the dropdown options to fit the screen.
Despite trying the code provided below, I am unable to change the dropdown background from being transparent. The code did not yield any results at all.
/*-- alteration of navbar dropdown color --*/
.navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu {
background-color: #3344ff;
color:#ffffff;
}
Below is the code snippet:
.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: all 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>
</a>
</div>
<div id="navbar" class="collapse navbar-collapse" data-target="#collapse1">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li class='headerBtn'> <button id="headerBtn">Start Quiz</button></li>
<% if(!currentUser){ %>
<li class='header'> <a href="/login"> Sign In</a></li>
<li class='header'> <a href="/register"> Sign Up </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>