CODEWITHSUNDEEP
twitter-bootstrapcssmedia-queries
user3097405
user3097405

Reputation: 823

Media query logical operator AND (max-width and max-height)

I'm using a vertical navbar on @media (min-height: 490px); if height is smaller, it turns into a horizontal navbar.

It should collapse ONLY if (max-width:300px) AND (max-height:490px). If width < 300px but height > 490px, it should not collapse.

I'm using Bootstrap 3.3.5 (Sass).

Here is a fiddle with fake width and height, only to show what is wrong. It collapses every time width < 300px, even if height is > 490px;

Is it possible to accomplish what I need using only media queries? Or should I start trying it with JQuery?

Upvotes: 2

Views: 220

Answers (1)

King Size
King Size

Reputation: 397

Add the style for your nav .collapse in the below media query. Here is the updated fiddle

@media (min-height: 490px) {
#side-navbar {
    width: 50px;
    height: 100%;
}
.navbar-collapse.collapse {
   display: block!important;
}
.navbar-toggle {
   display: none !important;
}
}

Upvotes: 1

Related Questions