css Question posted in
Some basic documentation can be found here.

Css – My navbar going under / overflowed by another elements on mobile view

/* ************************** */
/* BELOW 1350px (Smaller dekstops) */
/* ************************** */

@media (max-width: 84.5em) {
  .sticky-note {
    width: 30rem;
    height: 30rem;
  }

  .motto-heading {
    font-size: 5.2rem;
  }

  .product-description {
    font-size: 1rem;
  }
}

/* ************************** */
/* BELOW 1200px (Landscape Tablets) */
/* ************************** */

@media (max-width: 65em) {
  html {
    font-size: 56.25%;
  }

  .motto {
    top: 40%;
    transform: translate(0, -50%);
  }

  .sticky-note {
    width: 24rem;
    height: 24rem;
    padding: 1.6rem;
  }

  .motto-heading {
    font-size: 3.6rem;
  }

  .btn,
  .btn:link,
  .btn:visited {
    font-size: 1.2rem;
    padding: 0.8rem 2.4rem;
  }

  .product-description {
    font-size: 0.8rem;
  }
}

/* ************************** */
/* BELOW 944px (Tablets) */
/* ************************** */

@media (max-width: 58em) {
  .header {
    padding: 0 1.6rem;
  }

  .hero-section {
    margin-bottom: 3.2rem;
  }

  .margin-bottom-md {
    margin-bottom: 3.2rem !important;
  }

  .sticky-note {
    width: 20rem;
    height: 20rem;
    padding: 1.2rem;
  }

  .motto-heading {
    font-size: 3.6rem;
  }

  .motto {
    top: 40%;
    right: 50%;
    transform: translate(50%, -50%);
  }

  .btn,
  .btn:link,
  .btn:visited {
    font-size: 0.9rem;
    padding: 0.8rem 2.4rem;
  }

  .record {
    display: grid;
    grid-template-columns: 1fr;
  }

  .new-sticky {
    margin: 0 auto;
    text-align: center;
  }

  .btn--right {
    margin: 0 auto;
  }

  .hero-btn {
    padding: 0.8rem 1.2rem !important;
  }

  .playlist {
    display: grid;
    grid-template-columns: 1fr;
  }

  .playlist-container {
    grid-row: 1 / 2;
  }

  .section-playlist {
    margin-bottom: 4.8rem;
  }

  .footer {
    margin-top: 9.6rem;
  }

  .footer-logo {
    height: 8rem;
  }

  .footer-heading {
    font-size: 1.8rem;
  }

  .footer-link:link,
  .footer-link:visited {
    font-size: 1rem;
  }

  .copyright {
    font-size: 1.2rem;
  }

  /* Mobile navigation (hamburger menu) */

  .btn-mobile-nav {
    display: block;
    z-index: 99999;
  }

  .main-nav {
    background-color: rgba(255, 255, 255, 0.97);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%);

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  .main-nav-list {
    flex-direction: column;
    gap: 4.8rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 2.4rem;
  }
}

/* ************************** */
/* BELOW 704px ( Smaller Tablets) */
/* ************************** */

@media (max-width: 43.1em) {
  .sticky-note {
    width: 17rem;
    height: 17rem;
    padding: 1.2rem;
  }

  .motto-heading {
    font-size: 3rem;
  }

  .btn,
  .btn:link,
  .btn:visited {
    font-size: 0.63rem;
    padding: 0.8rem 2.4rem;
  }

  .product-description {
    font-size: 0.65rem;
  }
}

/* ************************** */
/* BELOW 544px ( Phones) */
/* ************************** */

@media (max-width: 34em) {
  .grid--4-cols {
    grid-template-columns: 1fr 1fr;
  }

  .sticky-note {
    width: 13rem;
    height: 13rem;
    padding: 1.2rem;
  }

  .motto-heading {
    font-size: 2.2rem;
  }

  .btn--center {
    width: 8.7rem;
    font-size: 1rem;
    text-align: center;
  }

  .product-description {
    font-size: 1.2rem;
  }

  .section-playlist {
    padding: 2.4rem;
  }

  .playlist-heading {
    text-align: left;
    font-size: 3.6rem;
  }

  .playlist-description {
    font-size: 1.2rem;
  }

  .note {
    right: 10px;
  }

  .footer {
    margin-top: 9.6rem;
  }

  .footer-logo {
    height: 5rem;
    margin-left: -10px;
  }

  .footer-heading {
    font-size: 1.6rem;
  }

  .footer-link:link,
  .footer-link:visited {
    font-size: 0.8rem;
  }

  .copyright {
    font-size: 1rem;
  }
}
/* General */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
}

body {
  font-family: monospace;
  line-height: 1;
  font-weight: 400;
  overflow-x: hidden;
}

/* ************************** */
/* GENERAL REUSABLE COMPONENTS */
/* ************************** */

.container {
  /* 1140px */
  max-width: 120rem;
  padding: 0 3.2rem;
  margin: 0 auto;
}

.grid {
  display: grid;
  column-gap: 2.4rem;
  row-gap: 2.4rem;
}

.grid--2-cols {
  grid-template-columns: 1fr 1fr;
}

.grid--3-cols {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4-cols {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.heading-primary {
  font-weight: 600;
  font-size: 5.2rem;
  margin-bottom: 3.2rem;
}

.heading-secondary {
  font-weight: 500;
  font-size: 3rem;
}

.btn,
.btn:link,
.btn:visited {
  display: inline-block;
  text-decoration: none;
  font-size: 1.8rem;
  padding: 0.8rem 2.4rem;
  border-radius: 20px;
  border: 1.5px solid #000;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #fff;
  color: #000;
}

.btn:hover,
.btn:active {
  background-color: #c2c2c2;
  color: #fff;
}

/* HELPER/SETTINGS CLASSES */

.margin-left-md {
  margin-left: 3.2rem !important;
}

.margin-bottom-md {
  margin-bottom: 4.8rem !important;
}

/* ************************** */
/* Header*/
/* ************************** */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  height: 12.8rem;
  padding: 0 4.8rem;
  position: relative;
}

.logo {
  height: 12.8rem;
}

/* ************************** */
/* Header*/
/* ************************** */

.main-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4.8rem;
}

.main-nav-link:link,
.main-nav-link:visited {
  display: inline-block;
  text-decoration: none;
  color: #000;
  font-weight: 500;
  font-size: 1.8rem;
  transition: all 0.3s;
  cursor: pointer;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: #333;
  cursor: pointer;
}

/* !!!! */
/* For Hamburger Menu*/
/* ********* */

.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;
  display: none;
}

.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: #333;
}

.icon-mobile-nav[name="close-outline"] {
  display: none;
}

/* STICKY NAVIGATION */
.sticky .header {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 8rem;
  padding-top: 0;
  padding-bottom: 0;
  background-color: rgba(255, 255, 255, 0.97);
  z-index: 999;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
}

.sticky .section-hero {
  margin-top: 9.6rem;
}
/* ************************** */
/* Hero Section*/
/* ************************** */

.hero-section {
  position: relative;
  margin-bottom: 9.6rem;
  z-index: 0;
}

.hero-img {
  width: 100%;
}

.motto {
  position: absolute;
  top: 40%;
  right: 15%;
  transform: translate(0, -50%);
}

.sticky-note {
  background-color: #1809f2;
  width: 35rem;
  height: 35rem;
  text-align: left;
  padding: 2.4rem;
  margin-bottom: 1.6rem;
}

.motto-heading {
  font-size: 6.2rem;
  color: #fff;
}

.btn--center {
  position: absolute;
  right: 50%;
  transform: translate(50%, 0);
}

/* ************************** */
/* New Stock section*/
/* ************************** */

/* .sticky-flex {
  display: flex;
} */

.grid--2-cols-cus1 {
  grid-template-columns: 1fr 9fr;
}

.new-stock {
  padding: 1.6rem 0;
}

.new-sticky {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #1809f2;
  width: 14.2rem;
  height: 14.2rem;
  padding: 0.8rem;
  text-align: right;
}

.sticky-heading {
  color: #fff;
  font-size: 1.6rem;
}

.product img {
  width: 100%;
}

.product {
  position: relative;
  border: 1.5px solid #000;
}

.product::after {
  content: "New";
  position: absolute;
  top: 0;
  right: 0;

  font-size: 1.4rem;
  background-color: #1809f2;
  color: #fff;
  padding: 1.2rem 0.8rem;
}

.product-description {
  padding: 1.2rem;
  font-size: 1.2rem;
  line-height: 1.5;
}

.product-description p:nth-child(3) {
  margin-bottom: 0.8rem;
}

.btn--right {
  justify-self: end;
  grid-column: -2 / -1;
}

/* ************************** */
/* Playlist section*/
/* ************************** */

.grid--2-cols-cus2 {
  grid-template-columns: 70fr 30fr;
  column-gap: 6.4rem;
}

.section-playlist {
  padding: 4.8rem;
  background-color: #1809f2;
  margin-bottom: 9.6rem;
}

.playlist-img {
  width: 100%;
}

.playlist-list {
  text-align: center;
}

.playlist-description {
  color: #fff;
  font-size: 1.6rem;
}

.playlist-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.playlist-heading {
  color: #fff;
  font-size: 5.2rem;
}

.note {
  position: absolute;
  right: 45px;
}

/* ************************** */
/* Staff pick section*/
/* ************************** */

.product-staff img {
  width: 100%;
}

.product-staff,
.product {
  position: relative;
  border: 1.5px solid #000;
  transition: all 0.3s;
}

.product-staff:hover,
.product:hover,
.product-staff:active,
.product:active {
  transform: scale(1.1);
  cursor: pointer;
}

/* ************************** */
/* Footer*/
/* ************************** */

.footer {
  padding: 4.8rem 0;
  margin-top: 9.6rem;
  background-color: #c2c2c2;
  position: relative;
}

.grid--footer {
  grid-template-columns: 1fr 1fr;
  justify-items: center;
}

.footer-logo {
  position: absolute;
  top: 0;
  left: 20px;
  height: 9.6rem;
}

.social-icon {
  height: 1.6rem;
  width: 1.6rem;
  position: absolute;
  right: 10px;
}

.copyright {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 1.4rem;
  line-height: 1.6;
}

.footer-heading {
  font-size: 2.4rem;
  font-weight: 500;
  margin-bottom: 3.2rem;
}

.margin-right {
  margin-left: -25px;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  font-size: 1.2rem;
  color: #000;
  transition: all 0.3s;
  position: relative;
}

.footer-link:hover,
.footer-link:active {
  color: #333;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta
      name="description"
      content="Groovy is a store where you can spoil your record collecting hobby. Here you can find whatever record you are looking for"
    />

    <link rel="icon" href="img/favicon copy.png" />
    <link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
    <link rel="manifest" href="manifest.webmanifest" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/general.css" />
    <link rel="stylesheet" href="css/queries.css" />

    
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
      integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <script
      defer
      src="https://unpkg.com/[email protected]/dist/smoothscroll.min.js"
    ></script>
    <script defer src="js/script.js"></script>

    <title>Groovy Records</title>
  </head>
  <body>
    <header class="header sticky">
      <a href="#">
        <img src="img/footer/logo.png" alt="Groovy logo" class="logo" />
      </a>

      <nav class="main-nav">
        <ul class="main-nav-list">
          <li><a href="#" class="main-nav-link">About</a></li>
          <li><a href="#" class="main-nav-link">Stocks</a></li>
          <li><a href="#" class="main-nav-link">Stores</a></li>
        </ul>
      </nav>

      <button class="btn-mobile-nav">
        <ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
        <ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
      </button>
    </header>

    <main>
      <section class="hero-section">
        <img
          src="img/Web_Home EmptyBG.webp"
          alt="background image"
          class="hero-img"
        />
        <div class="motto">
          <div class="sticky-note">
            <span class="motto-heading">Spinning</span>
            <span class="motto-heading">Memories</span>
            <span class="motto-heading">Since ♪</span>
            <span class="motto-heading">&horbar;&horbar;&horbar; 2010 </span>
          </div>
          <a href="#" class="hero-btn btn btn--center">Our Story</a>
        </div>
      </section>

      <section class="new-stock">
        <div class="record container grid grid--2-cols-cus1 margin-bottom-md">
          <div class="new-sticky">
            <h1 class="heading-secondary sticky-heading">New In Stock</h1>
          </div>

          <div class="grid grid--4-cols">
            <div class="product">
              <img
                src="img/New In Stocks/LoyleCarner-NotWavingButDrowning-3000x3000.jpg"
                alt="loyle-carner"
              />
              <div class="product-description">
                <p>Not Waving, But Drowning</p>
                <p>Loyle Carner</p>
                <p>2019</p>
                <p>Hip Hop music</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img
                src="img/New In Stocks/Frank-Ocean-Blond.jpg"
                alt="Frank ocean"
              />
              <div class="product-description">
                <p>Blonde</p>
                <p>Frank Ocean</p>
                <p>2016</p>
                <p>R&B/Soul</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img
                src="img/New In Stocks/Arlo-Parks.jpg.webp"
                alt="Arlo-Parks"
              />
              <div class="product-description">
                <p>Collapsed in Sunbeams</p>
                <p>Arlo Parks</p>
                <p>2021</p>
                <p>R&B/Soul, Alternative/Indie</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img
                src="img/New In Stocks/kings.jpeg"
                alt="kings-of-convenience"
              />
              <div class="product-description">
                <p>Declaration of Dependence</p>
                <p>Kings of Convenience</p>
                <p>2009</p>
                <p>Alternative</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img src="img/New In Stocks/billie.jpeg" alt="billie-holiday" />
              <div class="product-description">
                <p>Strange Fruit</p>
                <p>Billie Holiday</p>
                <p>1972</p>
                <p>Jazz</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img src="img/New In Stocks/fkj.jpeg" alt="Fkj" />
              <div class="product-description">
                <p>French Kiwi Juice</p>
                <p>FKJ</p>
                <p>2017</p>
                <p>Funk/Soul</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img
                src="img/New In Stocks/tyler.jpeg"
                alt=" Tyler, The creator"
              />
              <div class="product-description">
                <p>Call Me If You Get Lost</p>
                <p>Tyler, The Creator</p>
                <p>2021</p>
                <p>Hip Hop/ Rap</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product">
              <img
                src="img/New In Stocks/francoise.jpg"
                alt="Francoise hardy"
              />
              <div class="product-description">
                <p>Tous les garçons et filles</p>
                <p>Françoise Hardy</p>
                <p>1962</p>
                <p>Soul</p>
                <p>$50.00</p>
              </div>
            </div>
          </div>
          <a href="#" class="btn btn--right">All Stocks</a>
        </div>
      </section>

      <section class="section-playlist">
        <div class="playlist container grid grid--2-cols-cus2">
          <div class="grid grid--3-cols">
            <div class="playlist-list">
              <img
                src="img/playlist/Playlist_Krulism.png"
                alt="Playlist_Krulism"
                class="playlist-img"
              />
              <p class="playlist-description">
                A playlist intended for lifetime dedicated music enthusiast
              </p>
            </div>
            <div class="playlist-list">
              <img
                src="img/playlist/Playlist_Trip The Light.png"
                alt="Playlist_Trip"
                class="playlist-img"
              />
              <p class="playlist-description">
                A playlist intended for lifetime dedicated music enthusiast
              </p>
            </div>
            <div class="playlist-list">
              <img
                src="img/playlist/Playlist_Jazz.png"
                alt="Playlist_Jazz"
                class="playlist-img"
              />
              <p class="playlist-description">
                A playlist intended for lifetime dedicated music enthusiast
              </p>
            </div>
          </div>

          <div class="playlist-container">
            <span class="playlist-heading"
              >Curated Playlists to Jam Into
              <span class="note">♪♪</span>
            </span>
          </div>
        </div>
      </section>

      <section class="staff-pick">
        <div class="record container grid grid--2-cols-cus1 margin-bottom-md">
          <div class="new-sticky">
            <h1 class="heading-secondary sticky-heading">Staff's Picks</h1>
          </div>

          <div class="grid grid--4-cols">
            <div class="product-staff">
              <img src="img/staff's pick/chet.jpg" alt="Chet Baker" />
              <div class="product-description">
                <p>Chet Baker Sings</p>
                <p>Chet Baker</p>
                <p>1954</p>
                <p>Jazz</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img src="img/staff's pick/macmiller.jpg" alt="Mac Miller" />
              <div class="product-description">
                <p>Circles</p>
                <p>Mac Miller</p>
                <p>2020</p>
                <p>Hip Hop, Punk, Emo Rap</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img src="img/staff's pick/mazzy.jpg" alt="Mazzy Star" />
              <div class="product-description">
                <p>So Tonight That I Might See</p>
                <p>Mazzy Star</p>
                <p>1993</p>
                <p>Alternative</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img src="img/staff's pick/sade.jpg" alt="Sade adu" />
              <div class="product-description">
                <p>The Best of Sade</p>
                <p>Sade</p>
                <p>1994</p>
                <p>Jazz, Soul, R&B</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img
                src="img/staff's pick/beach house.jpg.webp"
                alt="Beach House"
              />
              <div class="product-description">
                <p>Depression Cherry</p>
                <p>Beach House</p>
                <p>2015</p>
                <p>Dream Pop, Indie Rock</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img src="img/staff's pick/archy.jpg" alt="Archy Marshall" />
              <div class="product-description">
                <p>A New Place 2 Drown</p>
                <p>King Krule</p>
                <p>2015</p>
                <p>Alternative</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img
                src="img/staff's pick/kingkrule.jpg.webp"
                alt=" King Krule"
              />
              <div class="product-description">
                <p>6 Feet Beneath The Moon</p>
                <p>King Krule</p>
                <p>2013</p>
                <p>Alternative</p>
                <p>$50.00</p>
              </div>
            </div>
            <div class="product-staff">
              <img
                src="img/staff's pick/the-ooz.jpg.webp"
                alt="King Krule - The Ooz"
              />
              <div class="product-description">
                <p>The Ooz</p>
                <p>King Krule</p>
                <p>2017</p>
                <p>Alternative</p>
                <p>$50.00</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="logo-col">
        <a href="#" class="container-rel">
          <img
            src="img/footer/logo.png"
            alt="Groovy logo"
            class="footer-logo"
          />
        </a>
      </div>
      <div class="container grid grid--footer margin-bottom-md">
        <nav class="nav-col">
          <p class="footer-heading">Quick Links</p>
          <ul class="footer-nav">
            <li><a href="#" class="footer-link">Home</a></li>
            <li><a href="#" class="footer-link">About</a></li>
            <li><a href="#" class="footer-link">Stocks</a></li>
            <li><a href="#" class="footer-link">Stores</a></li>
            <li><a href="#" class="footer-link">Wishlist</a></li>
          </ul>
        </nav>

        <nav class="nav-col">
          <p class="footer-heading margin-right">Contact</p>
          <ul class="footer-nav">
            <li>
              <a href="#" class="footer-link"
                ><ion-icon name="logo-whatsapp" class="social-icon"></ion-icon
              ></a>
              <a href="#" class="footer-link">(+65)22457889</a>
            </li>
            <li>
              <a href="#" class="footer-link"
                ><ion-icon name="logo-instagram" class="social-icon"></ion-icon
              ></a>
              <a href="#" class="footer-link">groovy.records</a>
            </li>
            <li>
              <a href="#" class="footer-link"
                ><ion-icon name="logo-facebook" class="social-icon"></ion-icon
              ></a>
              <a href="#" class="footer-link">groovy_records</a>
            </li>
            <li>
              <a href="#" class="footer-link"
                ><ion-icon name="mail-outline" class="social-icon"></ion-icon
              ></a>
              <a href="#" class="footer-link">[email protected]</a>
            </li>
          </ul>
        </nav>
      </div>
      <p class="copyright">
        &copy; <span class="year">2023</span> Groovy Records. All rights
        reserved.
      </p>
    </footer>
    <script
      type="module"
      src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
    ></script>
  </body>
</html>

i’m new to css and html. I’m currently trying to solve this problem where my hamburger menu (navbar) got below / overflowed by another elements when the website runs on mobile device Here is the example. My goal is to make the navbar stacking on top of the other elements like this.I tried using z-index on the navbar but it doesn’t do the work. Please let me know if one of you guys know the solution, thanks

I tried changing the value of z-index, changing the value of overflow property and looking for answers on google

Tags:

2

Answers


  1. 0

    I think I found the error.
    Its on line 456 of css file

      /* STICKY NAVIGATION */
  .sticky .header {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 8rem;
    padding-top: 0;
    padding-bottom: 0;
    background-color: rgba(255, 255, 255, 0.97);
    z-index: 999;
    box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
  }

    It should be:

      /* STICKY NAVIGATION */
  .sticky.header {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 8rem;
    padding-top: 0;
    padding-bottom: 0;
    background-color: rgba(255, 255, 255, 0.97);
    z-index: 999;
    box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
  }

    You have used the selector wrong change it from .sticky .header to .sticky.header

    So when you were putting all the z-index and stuff it was never actually applying to the element.

    Login or Signup to reply.
  2. 0

    Use a Higher z-index. I think it should work.

    .header {
  z-index: 1000;
  /* ... other styles ... */
}

.nav-open .main-nav {
  z-index: 999;
  /* ... other styles ... */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search