Access to styles of sleeping navigation menu in bootstrap

Question

I want to change the style of menu items in the Bootstrap 3 nav menu when the menu is in folded mode.

For instance:

<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 in the menu when these are different reacting states?

Thanks.

Edit: Another clarity ... Therefore, if you reduce the width of the screen and make the mobile menu appear, the menu items (navigation buttons) have the same style. Let's say I wanted to have buttons with a standard background (black here) in normal mode, but give them a green background in the mobile view, how do I do this?

Answer 1

For this you need to use CSS usage requests. For twitter bootstrap 3, you can use the following media queries and 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 you need some specific CSS in Tablets, you will do something like this -

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

Answer 2

In 3.3.5, I noticed that when attacking with the navigation bar, there is another class. I could draw my collapsed object as follows:

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

DEMO (click the mobile phone icon)

Answer 3

For the jQuery method, the breakpoint in the collaps navigation bar appears to be at 768 pixels, so you can:

 //this function is executed everytime the browser is re-sized, //you could also call this function on document ready so that the default size //when loading on mobile is checked $(window).resize(function(){ if($(window).width()<768){ $('.navbar.navbar-inverse').css('background-color','green'); } else { $('.navbar.navbar-inverse').css('background-color','#222'); } }); 

DEMO (click the mobile device icon)