• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 211
  • Last Modified:

Bootstrap navar-collapse

I have a navbar that collapses.  When it is in collapsed mode I want the dropdown menu link (text) font colors to be different then when it is in normal expanded mode.

I do know that this changes the color to white all the time that is expanded and collapsed

.navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu {
    color:white;
}

but I need to know what the style is to be different when collapsed and not
0
Sitewizard
Asked:
Sitewizard
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You can do this with a media query and probably some jquery to detect when collapse .

Looking at the documentation for the media queries bootstrap  uses http://getbootstrap.com/css/ we can see 768 is probably when it collapses.
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Open in new window

With that in mind,
@media (max-width: 768px {
     .foo{color:white}
}

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now