CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmenuresponsive-design
jack_snipe
jack_snipe

Reputation: 129

Bootstrap media queries not working for medium

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

Upvotes: 0

Views: 346

Answers (1)

ducnh241
ducnh241

Reputation: 31

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

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

OR

#menu ul{
display:flex;
}

Upvotes: 1

Related Questions