Access the styles of collapsed nav menu in bootstrap

Question

I want to change the style of the menu elements in Bootstrap 3's nav menu when the menu is in collapsed mode.

For example:

<div class="navbar navbar-inverse" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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="#">Project name</a>
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->

  </div>
</div>

Is there a way to access the style properties of the "li > a" elements of the menu when it is different responsive states?

Thanks.

Edit: Some more clarity... So if you reduce the width of the screen and force the mobile menu to appear, the menu elements (nav buttons) have the same style. Let's say I wanted to have buttons with the default background (black here) in normal view, but give them a green background in mobile view, how do I do this?

Answer 1

You need to use CSS media queries for doing that. For twitter bootstrap 3, you can use the following media queries & write your CSS for specific view ports -

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

Eg. If in Tablets you want some specific CSS, you will do something like this -

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
       .navbar-collapse li a { background: green; }
}

Answer 2

With 3.3.5, I noticed that the navbar target has one more class when it is collapsed. I could style my collapsed item like this :

.navbar.in ul li {
    /* style goes here */
}

DEMO(click the mobile icon)