My Navigation bar is going under my backgroud image when Iam veiwing it in mobile-CodePudding

This is my HTML code:

<!DOCTYPE html>
<html lang="en">
<header class="header">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
    <link rel="stylesheet" href="style.css">
    <title>Genius High School</title>
  
    <nav class="navbar">
      <ul class="nav-menu">
          <li class="nav-item">
              <a href="index.html" class="nav-link">Home</a>
          </li>
          <li class="nav-item">
              <a href="about.html" class="nav-link">About</a>
          </li>
          <li class="nav-item">
              <a href="academics.html" class="nav-link">Academics</a>
          </li>
          <li class="nav-item">
              <a href="worksheets.html" class="nav-link">Worksheets</a>
          </li>
          <li class="nav-item">
            <a href="circulars.html" class="nav-link">Circulars</a>
        </li>
        <li class="nav-item">
          <a href="gallery.html" class="nav-link">Gallery</a>
      </li>
      <li class="nav-item">
        <a href="message.html" class="nav-link">Message</a>
    </li>
    <li class="nav-item">
      <a href="contact.html" class="nav-link">Contact</a>
  </li>
      </ul>
      <div class="hamburger">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
      </div>
  </nav>
</header>
<body>
  <section>
    <div class="big-image">
      <div class="overlay">
        <span>
          <br>
          <br>
          <br>
          <h1><img src="imageedit_2_7258851370.gif">  Genius High School</h1>
          <br>
        </span>
        <p>Learn to serve</p>
      </div>
    </div>
  </section>
      <div id="news">
       <center><h1>School News</h1><center>
       <br>
       <br>
       <img src="png_20211127_162818_0000.png" class="news">
       <br>
       <h2>10th class student represented football tournament at state level(maharashtra).
         <center>Runner-up trophy<center>
       </h2>
      </div>
      <footer>
        <div class="footer">
        <br>
        <h1><img src="imageedit_2_7258851370.gif">  Genius High School</h1>
        <br>
        <div class="links">
          <h1><i class="fas fa-link"></i>  Links</h1>
          <ul class="navtwo">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="academics.html">Academics</a></li>
            <li><a href="worksheets.html">Worksheets</a></li>
            <li><a href="circulars.html">Circulars</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="message.html">Message</a></li>
            <li><a href="contact.html">Contact</a></li>
            <br>
            <br>
          </ul>
        </div>
        <div class="tel">
          <br><br>
          <h1><i class="fas fa-phone"></i>  Get in touch</h1>
          <br>
          <a class="phone_number" href="tel: 91-934-638-8595"> 91-934-638-8595</a>
        <br>
          <a class="phone_number" href="tel: 91-970-026-0200"> 91-934-638-8595</a>
        <br>
        <a class="phone_number" href="email:[email protected]">[email protected]</a>
        <br>
        <br><br><br><br>
        </div>
      </footer>
</body>
<script src="main.js"></script>
</html>

this is my css:

@import url('https://fonts.googleapis.com/css?family=Work Sans:400,600');
@import url('https://fonts.googleapis.com/css2?family=Dancing Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');
body {
    margin: 0;
    background-repeat:no-repeat;
    font-family: 'Work Sans', sans-serif;
    overflow-x: hidden;
      font-weight: 800;
}

.big-image {
  height: 100vh;
  width: 100vw;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-image:url(school.jpg);
}

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.overlay img {
 width: 80px;
 height: 80px;
}

.overlay h1 {
  font-size: 85px;
  letter-spacing: 0px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 0 5px;
}

.overlay p {
  margin: 0;
  font-size: 30px;
  letter-spacing: 2px;
  color: yellow;
  font-family: 'Dancing Script', cursive;
}

#news {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 60px;
}

#news h1 {
  color: navy;
  background-color: yellow;
  width: 100%;
}

#news a:first-of-type {
  margin-bottom: 5px;
}

.news {
  width: 500px;
  height: 500px;
}  

.navtwo {
  color: yellow;
  list-style-type: none;
}

footer {
  background-color: rgb(139, 218, 255);
  color: rgb(139, 139, 0);
}

footer img{
  height: 40px;
  width: 40px;
}

ul li {
  color: rgb(109, 109, 0);
  font-size: large;
}

li a {
  color: #646600;
  text-decoration: none;
}

.footer {
  margin-left: 20px;
  margin-top: 20px;
}

.links{
  margin-left: 20px;
}

.tel {
  margin-left: 20px;
}

.tel a {
  color: #686900;
  text-decoration: none;
}

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

html {
  font-size: 62.5%;
  font-family: 'Roboto', sans-serif;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

.header{
  border-bottom: 1px solid #E2E8F0;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
}

.hamburger {
  display: none;
}

nav {
  overflow: auto;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #101010;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 5rem;
}

.nav-link{
  font-size: 1.6rem;
  font-weight: 400;
  color: #475569;
}

.nav-link:hover{
  color: #482ff7;
}

.nav-logo {
  font-size: 2.1rem;
  font-weight: 500;
  color: #482ff7;
}

@media only screen and (max-width: 768px) {
  .nav-menu {
      position: fixed;
      left: -100%;
      top: 5rem;
      flex-direction: column;
      background-color: #fff;
      width: 100%;
      border-radius: 10px;
      text-align: center;
      transition: 0.3s;
      box-shadow:
          0 10px 27px rgba(0, 0, 0, 0.05);
  }

  .nav-menu.active {
      left: 0;
  }

  .nav-item {
      margin: 2.5rem 0;
  }

  .hamburger {
      display: block;
      cursor: pointer;
  }

}

.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

and this is my javascript code:

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", mobileMenu);

function mobileMenu() {
    hamburger.classList.toggle("active");
    navMenu.classList.toggle("active");
}

const navLink = document.querySelectorAll(".nav-link");

navLink.forEach(n => n.addEventListener("click", closeMenu));

function closeMenu() {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
}

When Iam viewing this on a mobile the navigation bar items are going under the background image. I've tried changing many things in it but still it's not working. I changed the margin of the nav bar but it was not working.Plz tell me if something is wrong in the code also plzz tell it in detail

CodePudding user response：

you can try this on your editor :

and add CSS

.nav-menu {
  z-index:999;
}

    const hamburger = document.querySelector(".hamburger");
    const navMenu = document.querySelector(".nav-menu");

    hamburger.addEventListener("click", mobileMenu);

    function mobileMenu() {
        hamburger.classList.toggle("active");
        navMenu.classList.toggle("active");
    }

    const navLink = document.querySelectorAll(".nav-link");

    navLink.forEach(n => n.addEventListener("click", closeMenu));

    function closeMenu() {
        hamburger.classList.remove("active");
        navMenu.classList.remove("active");
    }

@import url('https://fonts.googleapis.com/css?family=Work Sans:400,600');
@import url('https://fonts.googleapis.com/css2?family=Dancing Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');
body {
    margin: 0;
    background-repeat:no-repeat;
    font-family: 'Work Sans', sans-serif;
    overflow-x: hidden;
      font-weight: 800;
}

.big-image {
  height: 100vh;
  width: 100vw;
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-image:url(school.jpg);
}

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.overlay img {
 width: 80px;
 height: 80px;
}

.overlay h1 {
  font-size: 85px;
  letter-spacing: 0px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 0 5px;
}

.overlay p {
  margin: 0;
  font-size: 30px;
  letter-spacing: 2px;
  color: yellow;
  font-family: 'Dancing Script', cursive;
}

#news {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 60px;
}

#news h1 {
  color: navy;
  background-color: yellow;
  width: 100%;
}

#news a:first-of-type {
  margin-bottom: 5px;
}

.news {
  width: 500px;
  height: 500px;
}  

.navtwo {
  color: yellow;
  list-style-type: none;
}

footer {
  background-color: rgb(139, 218, 255);
  color: rgb(139, 139, 0);
}

footer img{
  height: 40px;
  width: 40px;
}

ul li {
  color: rgb(109, 109, 0);
  font-size: large;
}

li a {
  color: #646600;
  text-decoration: none;
}

.footer {
  margin-left: 20px;
  margin-top: 20px;
}

.links{
  margin-left: 20px;
}

.tel {
  margin-left: 20px;
}

.tel a {
  color: #686900;
  text-decoration: none;
}

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

html {
  font-size: 62.5%;
  font-family: 'Roboto', sans-serif;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

.header{
  border-bottom: 1px solid #E2E8F0;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
}

.hamburger {
  display: none;
}

nav {
  overflow: auto;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #101010;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index:999;
}

.nav-item {
  margin-left: 5rem;
}

.nav-link{
  font-size: 1.6rem;
  font-weight: 400;
  color: #475569;
}

.nav-link:hover{
  color: #482ff7;
}

.nav-logo {
  font-size: 2.1rem;
  font-weight: 500;
  color: #482ff7;
}

@media only screen and (max-width: 768px) {
  .nav-menu {
      position: fixed;
      left: -100%;
      top: 5rem;
      flex-direction: column;
      background-color: #fff;
      width: 100%;
      border-radius: 10px;
      text-align: center;
      transition: 0.3s;
      box-shadow:
          0 10px 27px rgba(0, 0, 0, 0.05);
  }

  .nav-menu.active {
      left: 0;
  }

  .nav-item {
      margin: 2.5rem 0;
  }

  .hamburger {
      display: block;
      cursor: pointer;
  }

}

.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
    <link rel="stylesheet" href="style.css">
    <title>Genius High School</title>
</head>
<header class="header">
  
    <nav class="navbar">
      <ul class="nav-menu">
          <li class="nav-item">
              <a href="index.html" class="nav-link">Home</a>
          </li>
          <li class="nav-item">
              <a href="about.html" class="nav-link">About</a>
          </li>
          <li class="nav-item">
              <a href="academics.html" class="nav-link">Academics</a>
          </li>
          <li class="nav-item">
              <a href="worksheets.html" class="nav-link">Worksheets</a>
          </li>
          <li class="nav-item">
            <a href="circulars.html" class="nav-link">Circulars</a>
        </li>
        <li class="nav-item">
          <a href="gallery.html" class="nav-link">Gallery</a>
      </li>
      <li class="nav-item">
        <a href="message.html" class="nav-link">Message</a>
    </li>
    <li class="nav-item">
      <a href="contact.html" class="nav-link">Contact</a>
  </li>
      </ul>
      <div class="hamburger">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
      </div>
  </nav>
</header>
<body>
  <section>
    <div class="big-image">
      <div class="overlay">
        <span>
          <br>
          <br>
          <br>
          <h1><img src="imageedit_2_7258851370.gif">  Genius High School</h1>
          <br>
        </span>
        <p>Learn to serve</p>
      </div>
    </div>
  </section>
      <div id="news">
       <center><h1>School News</h1><center>
       <br>
       <br>
       <img src="png_20211127_162818_0000.png" class="news">
       <br>
       <h2>10th class student represented football tournament at state level(maharashtra).
         <center>Runner-up trophy<center>
       </h2>
      </div>
      <footer>
        <div class="footer">
        <br>
        <h1><img src="imageedit_2_7258851370.gif">  Genius High School</h1>
        <br>
        <div class="links">
          <h1><i class="fas fa-link"></i>  Links</h1>
          <ul class="navtwo">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="academics.html">Academics</a></li>
            <li><a href="worksheets.html">Worksheets</a></li>
            <li><a href="circulars.html">Circulars</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="message.html">Message</a></li>
            <li><a href="contact.html">Contact</a></li>
            <br>
            <br>
          </ul>
        </div>
        <div class="tel">
          <br><br>
          <h1><i class="fas fa-phone"></i>  Get in touch</h1>
          <br>
          <a class="phone_number" href="tel: 91-934-638-8595"> 91-934-638-8595</a>
        <br>
          <a class="phone_number" href="tel: 91-970-026-0200"> 91-934-638-8595</a>
        <br>
        <a class="phone_number" href="email:[email protected]">[email protected]</a>
        <br>
        <br><br><br><br>
        </div>
      </footer>
</body>
<script src="main.js"></script>
</html>

CodePudding user response：

I think you are confusing a head with a header.

The head of an html document contains metadata and goes before the body.

A header contains html elements that belong at the top of the body. (Inside the body)

So in short, your code is missing a head and you seem to have placed your header outside the body, where the head should be.

Here's a sample boilerplate:

<html>
  <head>
    // title, metadata, etc.
  </head>
  <body>
    <header>
      <nav>
        ...
      </nav>
    </header>
    <section>
      ...
    </section>
  </body>
</html>