Bootstrap media queries not working for medium

0
votes

I want to create a website using bootstrap. Everything is fine with the menu, i have code written for max-width : 480px, 320px and 768px. So menu will be displayed for mobile devices. But when i tried to add the same code to @media only screen and (max-width : 991px)(i want mobile menu for these devices too) it didnt work. Actually some parts seems has been changed according to styles, but overall menu wasnt the same as it was for 480px.

ok this is my css for all max-width : 480px, 320px, 768px

@media only screen and (max-width : 768px) {
nav{
    height: 50px;
    line-height:50px;
    background-color: #2f334d;
    position: fixed;
}
.navHeader{
    background-color: #24254d;
}
.line{
    display: none;
}
.logo{
    padding-top:15px;
}
.menu_btn{
    padding:0;
}
#top_menu{

    background-color: #31344e;
}
.menu li{
    padding: 10px 0;
    display: block;
    text-align: center;
    border-bottom: 1px solid white;

}
.title{
    font-size: 35px;
}

}

and in smaller size everything is fine enter image description here

but when i add the same code for media mas 991 px i see this enter image description here

1
htmlcsstwitter-bootstrapmenuresponsive-design
You need to provide code, and specify what version of bootstrap you are using. – norbidrak
code is there. bootstrap 3 – jack_snipe
@jack_snipe that doesn't make a lot of sense. Why would you define the same CSS for 480px, 320px, 768px? Defining it once for 768px would be the same as what you are doing now as everything below 768px would use those styles. Perhaps included your full CSS. – hungerstar
well i deleted others and there is now only for 768px. its working, but lets say when i want to add it for 991 or 992 or whatever, it is working as shown in second image. – jack_snipe
@jack_snipe Bootstrap 3 uses "mobile first" approach, which means, that you work from smallest screen to the largest. Use media with "min-width: 768px" instead, and it will work for wider screen sizes too. Anyway use media queries as a last resort, bootstrap provides classes like "col-sm/col-md ..." and so one, to provide different behaviour at different screen sizes. – norbidrak

1 Answers

1
votes

You can try this code below here width @media (min-width: 768px)

#menu ul>li{
display:inline-block:!important
}

OR

#menu ul{
display:flex;
}