CODEWITHSUNDEEP
csstwitter-bootstrapdrop-down-menutwitter-bootstrap-3
MaylorTaylor
MaylorTaylor

Reputation: 5041

Bootstrap dropdown menu text color

So i'm working with Twitter's Bootstrap for the first time and I'm trying to change the color of the text inside the dropdown menus once they have collapsed. (if that makes sense)

I used this site (<<<--- link to CSS i am using) to help with some CSS but i can't seem to find the right code block that changes the color of the correct text.

When you compress the webpage so it shows the collapse menu and go to the Dropdown list, you will see that the blue background transfers over to the dropdown menu items, but the font-color is black making it very hard to read. I want this font to be white.

<nav class="navbar navbar-custom" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1">
            <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="#">ATR Notary</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="~/Order/Index" class="dropdown-toggle"
                   data-toggle="dropdown">Orders <b class="caret"></b></a>
                <ul class="dropdown-menu">                                    
                    <li><a href="~/Order/Index">View Orders</a></li>
                    <li><a href="~/Order/Create">Add Order</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="~/Notary/Index" class="dropdown-toggle"
                   data-toggle="dropdown">Notaries <b class="caret"></b></a>
                <ul class="dropdown-menu">                                   
                    <li><a href="~/Notary/Index">View Notaries</a></li>
                    <li><a href="~/Notary/Create">Add Notary</a></li>
                </ul>
            </li>
        </ul>

        @Html.Partial("_LoginPartial")
    </div><!-- /.navbar-collapse -->

</nav>

Upvotes: 8

Views: 64327

Answers (3)

wla312
wla312

Reputation: 31

previous answer is saying the same thing pretty much, but their syntax and commenting was a little confusing for me, so possibly it confused others too... you're first calling out the 'dropdown-menu' class, then the 'li' html element within that class, then, the 'a' html element nested within the 'li' element, so CSS looks like this:

.dropdown-menu li a {
    color: white;
}

Upvotes: -1

Rajan471
Rajan471

Reputation: 338

Apply simple css and you are done

See this example:

.navbar{height:70px; padding-top:20px; }

will change height and padding of navbar - that is outter container

.dropdown-menu{background:rgba(0,0,0,0.5); color:white; }

will change background color of dropdown-menu - that is ul under dropdown link. All we have to understand the structure of navbar.

   .dropdown-menu li>a{color:white; }
   .dropdown-menu>li{padding:5px; border-bottom:1px solid white;border-left:1px 
              solid white;border-right:1px solid white }
   .dropdown-menu li>a:hover{background:white; }

Upvotes: 7

Carol Skelly
Carol Skelly

Reputation: 362430

You should be able to use this CSS..

  /*-- 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;
  }

Demo: http://www.bootply.com/113750

Upvotes: 15

Related Questions