Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

how to change color of links in dropdown menu in navbar toggle

My navigation bar has a dropdown menu that looks like this.
enter image description here
when I resize my browser to get the small device version it looks like this.
enter image description here

I want to change the color of links in the dropdown(services) to black but I don’t know which class to select for CSS.
I tried this but didn’t work out.

.dropdown-menu {
     display: none;
     position: absolute;
     background-color: #00ff99;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
}
.dropdown-menu > li > a {
     float: none;
     color: black;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
}
.navbar-toggle .dropdown-menu > li > a{
     color: black;
}

this is my HTML

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   </button>
   @Html.ActionLink("E-HealthCare", "About", "Home", new { area = "" }, new { @class = "navbar-brand shadow" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
   <li>@Html.ActionLink("Home", "About", "Home")</li>
   @*
   <li>@Html.ActionLink("About", "About", "Home")</li>
   <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
   <li>@Html.DropDownList("Services","ALL")</li>
   *@
   <li>
      <div class="dropdown">
         <button class="Dropdown-btn btn-block text-left dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="false">
         Services
         <span class="caret"></span>
         </button>
         <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
         </ul>
      </div>
   </li>
</ul>

>Solution :

Try this if this works.

ul.dropdown-menu > li > a {color:black !important;}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading