Nav menu hidden by website background

[Codeman]

Why is my nav menu going under the background of my website and everything that has a background when its sticky?

image

code

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}



nav {
  background: #222;
  padding: 0 15px;
  font-family: 'Open Sans';
  font-weight: 600;
  margin-bottom: -10px!important;
position: sticky;
  top: 0;
}
nav a {
  color: white;
  text-decoration: none;
}

nav a:hover {
     color: rgb(233, 221, 221);
}


.logo {
  font-size: 20px;
  padding: 7.5px 10px 7.5px 0;
}
.item {
  padding: 10px;
}

/* Mobile menu */
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.menu li a {
  display: block;
  padding: 15px 5px;
}
.menu li.subitem a {
  padding: 15px;
}
.toggle {
  order: 1;
  font-size: 20px;
  color: white;
}

.toggle:hover {
     color: white;
}

.item {
  order: 3;
  width: 100%;
  text-align: center;
  display: none;
}
.active .item {
  display: block;
}


/* Tablet menu */
@media all and (min-width: 700px) {
  .menu {
    justify-content: center;
  }
  .logo {
    flex: 1;
  }
 
  .toggle {
    flex: 1;
    order: 2;
    color: white;
  }
}
/* Desktop menu */
@media all and (min-width: 960px) {
  .menu {
    align-items: flex-start;
    flex-wrap: nowrap;
    background: none;
  }
  .logo {
    order: 0;
  }
  .item {
    order: 1;
    position: relative;
    display: block;
    width: auto;
  }
  .submenu-active .submenu {
    display: block;
    position: absolute;
    left: 0;
    top: 68px;
    background: #111;
  }
  .toggle {
    display: none;
  }
  .submenu-active {
    border-radius: 0;
  }
}


#generic_price_table .generic_content .generic_price_btn a{
	border: 1px solid #2ECC71; 
    color: #2ECC71;
} 


#generic_price_table .generic_content:hover .generic_price_btn a,
#generic_price_table .generic_content.active .generic_price_btn a{
	background-color: #2ECC71;
	color: #fff;
} 

#generic_price_table .generic_content .generic_price_btn a{
    border-radius: 50px;
	-moz-border-radius: 50px;
	-ms-border-radius: 50px;
	-o-border-radius: 50px;
	-webkit-border-radius: 50px;
    display: inline-block;
    font-family: "Lato",sans-serif;
    font-size: 18px;
    outline: medium none;
    padding: 12px 30px;
    text-decoration: none;
    text-transform: uppercase;
}

#generic_price_table .generic_content .generic_price_btn a,
#generic_price_table .generic_content:hover .generic_price_btn a{
	transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;
} 

<style>
   body {
      background-image: url("images/Background.jpg");
      background-color: white;
   }
   </style>
 
<nav>
   <ul class="menu">
      <li class="logo"><a href="https://uprightcode.com/">Upright Code</a></li>
      <li class="item"><a href="https://uprightcode.com/">Home</a></li>
      <li class="item"><a href="#About">About</a></li>
      <li class="item"><a href="#plans">Plans</a></li>
      <li class="item"><a href="https://uprightcode.com/Lessons">Lessons</a>
      <li class="item"><a href="https://uprightcode.com/CEO-ONLY.php">CEO</a>
      </li>
   <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
   </ul>
</nav>

const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");


/* Toggle mobile menu */
function toggleMenu() {
    if (menu.classList.contains("active")) {
        menu.classList.remove("active");
        toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
    } else {
        menu.classList.add("active");
        toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
    }
}



/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
for (let item of items) {
    if (item.querySelector(".submenu")) {
        item.addEventListener("click", toggleItem, false);
    }
    item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);

[wake689]

@Codeman

margin-bottom: -10px!important;

What are you trying to achieve with this? What do you think it might do to the bottom margin of <nav>?

[Codeman]

because there will be a large gap in between the banner and the nav and I tried removing it and is did not work.

[PaulOB]

I suggest you look up what z-index does and how it is applied to control the stacking levels of elements.

Don’t use !important as a band aid to fix something that you don’t understand yet.

You don’t need the negative margin. You just need to find the reason for the gap. Don’t just throw magic number fixes at your page.

Use the devtools to find out where the gap comes from.