Add background color to extra small devices navigation

Question

I am developing a bootstrap responsive theme here is the URL:http://hex-technologies.com/hex_demo/trans-exec/ when i view it on small screen devices navigation showing transparent background i want to add a background which only work on small devices is there any class related to my problem waiting for a nice solution. Thanks in advance.

Answer 1

The solution is to use a CSS media query. A media query defines a block of CSS to be applied only if certain criteria (such as screen size) are met. Here's the definition of media queries, according to the Mozilla Developer's Network:

A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

If you want only handheld devices to have a red background, for example, you might use the following code snippet:

@media handheld {
  body {
    background: red;
  }
}

Alternately, if you want only devices which have a screen width 200px or less to have a red background, you would use the following code snippet:

@media (max-width: 200px) {
  body {
    background: red;
  }
}

---

Disclaimer: when targeting mobile devices, you need to be aware of a few "gotchas". The first, and most problematic one, is the difference between a "device pixel" and a "screen pixel". You can read more about that problem and how to address it here. Also, be aware that most mobile browsers are designed to switch between landscape and portrait display on the fly -- but this isn't much of a problem, since there is also a media-query that can be used to determine screen orientation.

Answer 2

Target Bootstrap's media queries, which change the nav at 768px. Set the color, and then set it to transparent at and above 768px:

.navbar-collapse {background: #000;}
@media (min-width: 768px){
  .navbar-collapse {background: transparent;}
}