Hello I am trying to change the color of the bootstrap dropdown anchor color and it's dropdown item color but to no avail it cannot be change. The dropdown is within the navbar. What seems to be wrong?
Here is the html code for the bootstrap dropdown anchor.
.nav-menu, .nav-menu * {
margin: 0;
padding: 0;
list-style: none;
padding-bottom: 0px;
}
.nav-menu > ul > li {
position: relative;
white-space: nowrap;
float: left;
}
.nav-menu a {
display: block;
position: relative;
color: #fff;
padding: 10px 15px;
transition: 0.3s;
font-size: 15px;
font-family: "Open Sans", sans-serif;
}
.nav-menu a:hover{
color: #4e4039;
text-decoration: none;
}
.nav-menu .active{
color: #fff;
text-decoration: none;
}
.nav-menu li:hover{
color: #4e4039;
text-decoration: none;
}
.nav-item > li{
color: #fff !important;
text-decoration: none;
}
.nav-menu .drop-down ul {
display: block;
position: absolute;
left: 0;
top: calc(100% - 30px);
z-index: 99;
opacity: 0;
visibility: hidden;
padding: 10px 0;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: ease all 0.3s;
}
.nav-menu .drop-down:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.nav-menu .drop-down li {
min-width: 180px;
position: relative;
}
.nav-menu .drop-down ul a {
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
text-transform: none;
color: #3c1300;
}
.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
color: #990000;
}
.nav-menu .drop-down > a:after {
content: "\ea99";
font-family: IcoFont;
padding-left: 5px;
}
.nav-menu .drop-down .drop-down ul {
top: 0;
left: calc(100% - 30px);
}
.nav-menu .drop-down .drop-down:hover > ul {
opacity: 1;
top: 0;
left: 100%;
}
.nav-menu .drop-down .drop-down > a {
padding-right: 35px;
}
.nav-menu .drop-down .drop-down > a:after {
content: "\eaa0";
font-family: IcoFont;
position: absolute;
right: 15px;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active"><a href="#header">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#Locate" target="_blank">Locate</a></li>
<li><a href="#search">Search </a></li>
<li><a href="#List">List</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark pro-pic"
href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
<div class="dropdown-menu dropdown-menu-right user-dd animated">
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="modal" data-placement="top" href="#account_edit_script">Account Settings</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</nav>Here is the dropdown item.
<div class="form-group">
<label class="d-flex justify-content-center"><strong>Update Information</strong></label>
<label>Fullname</label>
<input type="text" name="user_fullname" value="<?php echo $row['user_fullname']; ?>" class="form-control" placeholder="" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="user_email" value="<?php echo $row['user_email']; ?>" class="form-control" placeholder="" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
placeholder="Enter New/Old Password" required>
I hope you can help me. I might missed something? I don't know but please point me to the right direction.
Here is the image. Image
CodePudding user response：
It is because the class .text-muted has !important which will override your styles. To override this again you have to add !important again in your styles. Here's the code
.nav-menu, .nav-menu * {
margin: 0;
padding: 0;
list-style: none;
padding-bottom: 0px;
}
.nav-menu > ul > li {
position: relative;
white-space: nowrap;
float: left;
}
.nav-menu a {
display: block;
position: relative;
color: #fff;
padding: 10px 15px;
transition: 0.3s;
font-size: 15px;
font-family: "Open Sans", sans-serif;
}
.nav-menu a:hover{
color: #4e4039;
text-decoration: none;
}
.nav-menu .active{
color: #fff;
text-decoration: none;
}
.nav-menu li:hover{
color: #4e4039;
text-decoration: none;
}
.nav-item > li{
color: #fff !important;
text-decoration: none;
}
.nav-menu .drop-down ul {
display: block;
position: absolute;
left: 0;
top: calc(100% - 30px);
z-index: 99;
opacity: 0;
visibility: hidden;
padding: 10px 0;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: ease all 0.3s;
}
.nav-menu .drop-down:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.nav-menu .drop-down li {
min-width: 180px;
position: relative;
}
.nav-menu .drop-down ul a {
padding: 10px 20px;
font-size: 14px;
font-weight: 500;
text-transform: none;
color: #3c1300;
}
.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
color: #990000;
}
.nav-menu .drop-down > a:after {
content: "\ea99";
font-family: IcoFont;
padding-left: 5px;
}
.nav-menu .drop-down .drop-down ul {
top: 0;
left: calc(100% - 30px);
}
.nav-menu .drop-down .drop-down:hover > ul {
opacity: 1;
top: 0;
left: 100%;
}
.nav-menu .drop-down .drop-down > a {
padding-right: 35px;
}
.nav-menu .drop-down .drop-down > a:after {
content: "\eaa0";
font-family: IcoFont;
position: absolute;
right: 15px;
}
.nav-menu a.text-muted {
color: #fff!important;
}
nav.nav-menu {background: red;}
nav.nav-menu ul::after {content: ''; clear: both; display: table;}<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active"><a href="#header">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#Locate" target="_blank">Locate</a></li>
<li><a href="#search">Search </a></li>
<li><a href="#List">List</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark pro-pic"
href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
<div class="dropdown-menu dropdown-menu-right user-dd animated">
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="modal" data-placement="top" href="#account_edit_script">Account Settings</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</nav>
<div class="form-group">
<label class="d-flex justify-content-center"><strong>Update Information</strong></label>
<label>Fullname</label>
<input type="text" name="user_fullname" value="<?php echo $row['user_fullname']; ?>" class="form-control" placeholder="" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="user_email" value="<?php echo $row['user_email']; ?>" class="form-control" placeholder="" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
placeholder="Enter New/Old Password" required> PS Open this snippet in full screen
To color the dropdown menu colors just add the following
.nav-menu .dropdown-menu a {
color: #333;
}