无论如何，是否可以针对不同的屏幕尺寸更改导航栏的字体颜色

Question

I'm using Bootstrap 3.0 and I want to change the color of my navigation menu for different screen sizes(eg red for iphone, black for tablet etc).I have tried doing this using media queries but have no luck so far.

I have tried numerous methods:

@media(max-width:480px) {
    .navbar-brand{
         position: absolute;
    top: 0;
    left: 0;
    width:170px;
    height:70px;

    }
    navbar-nav{
     color:#000000;      
}
    }


@media(max-width:480px) {
    .navbar-brand{
         position: absolute;
    top: 0;
    left: 0;
    width:170px;
    height:70px;

    }
    ul{
     color:#000000;      
}
    }

I 've tried assigning different id's still no luck.Can anyone help?

EDIT: Added http://www.bootply.com/nxQHGFqLED with whole CSS and the html part, maybe i missed something.

Answer 1

You are not doing it correctly. I see your code on Bootply, you are using max-width only. For example, code in here @media(max-width:480px) {} will be overwritten by code in @media(max-width:767px) {}

Besides, you are giving ul.nav a {color:#b9b9b9 !important}, which is unnecessary, remove it! You should use !important to overwrite code if you really have to. There are a lot of errors in the code you provided,please fix them first.

Answer 2

Try something similar to the following - extend the html box to see it.

<div class="navbar navbar-inverse navbar-fixed-top" 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>

I used;

@media(min-width: 720px) {
    .navbar-inverse .navbar-nav>li>a,
    .navbar-inverse .navbar-nav>.active>a,
    .navbar-inverse .navbar-brand
    {
        color: red;    
    }
}
@media(min-width: 920px) {
    .navbar-inverse .navbar-nav>li>a,
    .navbar-inverse .navbar-nav>.active>a,
    .navbar-inverse .navbar-brand
    {
        color: blue;    
    }
}

http://jsfiddle.net/7vyjX/1/