Media Query in rails/bootstrap - ruby-on-rails-3

Question

I am having trouble getting a media query to work in bootstrap ( using rails). Below is the media query
#media (min-width: 768px) {
.center.navbar .nav, .center.navbar .nav > li {
display:inline-block;
float:none;
vertical-align:top;
width:100%;
}
.center .dropdown-menu {
display: none;
text-align:left;
}
.center .dropdown.open ul {
display: block;
}
The above media query is overriding all default behaviour no matter what the screen size is.I have received some advice from #baptme (thanks so much) to explain what is happening (which I now understand), basically because the query is using two classes and the default behaviour uses 1 class then the media query overrides. So my question is how do I get the media query to work only when the screen size is below 768px in this example and override the default styles when not
However this is where I get a little confused as when inspecting the elements in Firebug the defaults are as follows
.center.navbar .nav, .center.navbar .nav > li {
display: inline-block;
float: none;
vertical-align: top;
}
.center .dropdown-menu {
text-align: left;
}
Can anyone shed any more light on this, any help appreciated, if you would like to see it in action go to
http://46.32.253.11/

Answer 1

From your example:
This will hide the dropdown, remove the black hover and display the links one under the other aligned on the left:
#media (max-width: 979px) {
.navbar .dropdown-menu {display:none}
.navbar .nav > li a:hover { background-color:transparent}
.center.navbar .nav, .center.navbar .nav > li {display: table;clear:both};
}