Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 825
MaylorTaylor Avatar asked Feb 27 '14 16:02

MaylorTaylor


1 Answers

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

like image 176
Zim Avatar answered Oct 08 '22 06:10

Zim