Drop-down menu for a tablet

Question

How to apply @media for tablet of width 991px? I already the CSS file that is working for mobiles but on switching to tablets the entire css is different. How can I make the same CSS apply for the tablet as it is working for mobiles in the dropdown menu?

I have tried this for the CSS:

@media (max-width: 991px) {
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-nav>li {
    float: none;
    background: black;
}
.navbar-text {
    float: none;
    margin: 15px 0;
}
.navbar-collapse.collapse.in { 
    display: block !important;    }}

Here is the Plunker. Here I want the drown down menu to work for the width up to 991px but it is working for up to width 768px. How can change it?

Answer 1

change your div's classs

collapse navbar-collapse col-lg-6 col-md-6 col-sm-12 col-xs-7 pull-right

with collapse navbar-collapse col-lg-6 col-md-6 col-sm-12 col-xs-12

change in class

.navbar-collapse.collapse.in {
display: block !important;
margin-left: 0;
}

Answer 2

use the following media query for the tablet to apply the same CSS

/* Landscape tablets and medium desktops */

@media (min-width: 992px) and (max-width: 1199px) {
 .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-nav>li {
        float: none;
        background: black;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in { 
        display: block !important;
    }
}