Issue
I want to make a website with Html, CSS and javascript. Currently, I am facing the issue, that multiple media queries (in CSS) don't work at the same time.
I already looked at similar questions asked about this topic, in which they said you can nest multiple queries but then more than two media queries still don't seem to work (the code below isn't nested though).
My goal is it that the fade in / fade out of the navigation bar is fluent at every height and width (which would work, but now won't because too many queries). Between (min-width: 961px) and (max-width: 1101px) that max-width should be bigger (80%) than else (60%), so that the element Über uns is still on one line shown. The vh when the dropdown menu is showing should be on 75vh when the screen size is between (max-width: 961px) and (max-height: 501px). Last but not least if screen size is smaller than 961px it should just show the menu button.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Avisch</title>
<link rel="stylesheet" href="Startseite.css" />
</head>
<body>
<nav class="navbar">
<div class="navbar__container">
<a href="/" id="navbar__logo">AVISCH</a>
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
<a href="Startseite.html" class="navbar__links">Startseite</a>
</li>
<li class="navbar__item">
<a href="Ueber_uns.html" class="navbar__links">Über uns</a>
</li>
<li class="navbar__item">
<a href="Blog.html" class="navbar__links">Blog</a>
</li>
<li class="navbar__item">
<a href="Kontakt.html" class="navbar__links">Kontakt</a>
</li>
</ul>
</div>
</nav>
<script language="javascript" type="text/javascript" src="app.js"></script>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Kumbh Sans", sans-serif;
}
.navbar {
background: #d4d4cc;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999; /*Damit Navbar immer sichtbar ist*/
box-shadow: inset -26.0416vw 0px 26.0416vw -18.22916vw #131313,
inset 26.0416vw 0px 26.0416vw -18.22916vw #131313;
}
.navbar__container {
background: #131313;
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 67.708333333333333333333333333333%;
margin: 0 auto;
padding: 0 50px;
box-shadow: inset 26.0416vw 0px 26.0416vw -17.447916666666666666666666666667vw
#d4d4cc,
inset -26.0416vw 0px 26.0416vw -17.447916666666666666666666666667vw #d4d4cc;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to right, #131313 45%, #ee1d23 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2.5rem;
font-weight: bold;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar__item {
height: 50px;
margin: 5px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar__links:hover {
background: #b8151b;
border: none;
outline: none;
border-radius: 4px;
width: 100%;
height: 100%;
transition: all 0.3s ease;
}
@media screen and (max-width: 961px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: 100%;
top: -1000px;
opacity: 0;
transition: all 0.5s ease;
height: 60vh;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
box-shadow: inset 500px 0px 500px -450px #d4d4cc,
inset -500px 0px 500px -450px #d4d4cc;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #000;
display: block;
cursor: pointer;
}
.navbar__item {
width: 100%;
margin: 0;
}
.navbar__links {
text-align: center;
padding-top: 1rem;
padding-bottom: 1rem;
width: 100%;
display: table;
}
.navbar__links:hover {
width: 100%;
height: 100%;
transition: all 0.3s ease;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
@media screen and (min-width: 1101px) {
.navbar__container {
max-width: 67.708333333333333333333333333333%;
}
}
@media screen and (min-width: 961px), screen and (max-width: 1101px) {
.navbar__container {
max-width: 80%;
}
@media screen and (max-width: 961px) and (max-height: 501px) {
.navbar__menu.active {
height: 75vh;
}
}
Solution
Regarding the problem with the width, your basic problem is this line:
@media screen and (min-width: 961px), screen and (max-width: 1101px)
When you use a comma in a media rule, it operates as a logical OR. So this rule will be applied if the width is greater than 961 OR if it is less than 1101 -- which is true for all widths. Instead, you need a logical AND between these conditions, so that the rule only applies between these two widths:
@media screen and (min-width: 961px) and (max-width: 1101px)
My preferred way to arrange media queries is to follow the principle of mobile-first design, listing narrow viewport rules first, then add media queries for wider viewports in increasing order of width. That way, each media query just overrides whatever styles it needs to, at whatever width it needs to, and you don’t get tangled up with ANDs and ORs.
.navbar__container {
width: 100%; /* narrow viewports */
}
@media (min-width: 961px) {
.navbar__container {
max-width: 80%; /* medium viewports */
}
}
@media (min-width: 1101px) {
.navbar__container {
max-width: 68%; /* wide viewports */
}
}
Answered By - Brett Donald
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.