'CSS media multiple queries doesn't work when the statements are overarching

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;
  }
}
cssmedia-queries


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions