Contents Gets Overlapped In Mobile View In HTML And CSS

The code works correctly in desktop view but when I try to shrink the browser the over lap happens. I have provided the @media queries but still the contents overlaps with each oth

Solution 1:

You have written very lengthy code for a very simple thing, but sticking to your code, just replace your "visibility: collapse" with "display: none" and "visibility: visible" with "display: block", in your code. Your working CSS code is like this:

.navbar2 {
  color: #fff;
  font-family: "Poppins" !important;
  text-align: center;
  background: #ffffff;
  padding-top: 20px;
  padding-bottom: 5px;
}

.navbar2_for_mobile {
  display: none
}

.products {
  background: #e1e1e2;
}

.our_products_are_nuts {
  text-align: center;
  font-size: 25px;
  font-family: "Poppins";
  font-weight: bold;
}
.nuts_expl {
  text-align: center;
  font-family: "Poppins";
}

@media screen and (max-width: 720px) {
  .navbar2 {
    display:none
  }


  .navbar2_for_mobile {
    display:block;
    color: #fff;
    font-family: "Poppins" !important;
    text-align: center;
    background: #ffffff;
    padding-top: 20px;
    padding-bottom: 5px;
  }
  
}

Edit: - Also remove "margin-top: -50px and -100px" from your code.

Solution 2:

.navbar2 {
  color: #fff;
  font-family: "Poppins" !important;
  text-align: center;
  background: #ffffff;
  padding-top: 20px;
  padding-bottom: 5px;
}

.navbar2_for_mobile {
  visibility: collapse;
}

.products {
  background: #e1e1e2;
  padding:10px;
  margin-top: -50px;
}

.our_products_are_nuts {
  
  text-align: center;
  font-size: 25px;
  font-family: "Poppins";
  font-weight: bold;
}
.nuts_expl {
  text-align: center;
  font-family: "Poppins";
}

@media screen and (max-width: 760px) {
  .navbar2 {
    visibility: collapse;
  }


  .navbar2_for_mobile {
    visibility: visible;
    margin-top: -100px;
    color: #fff;
    font-family: "Poppins" !important;
    text-align: center;
    background: #ffffff;
    padding-top: 20px;
    padding-bottom: 5px;
  }
 .products {
  margin-top: 0px;
}
}

<div class="navbar2">
      <div class="container">
        <p>
          <a href="#section_products">Products</a>
          <span class="the_line"> | </span>
          <a href="#section_products_services">Services</a>
          <span class="the_line"> | </span>
          <a href="#section_about_nuts_main">About Nuts</a>
          <span class="the_line"> | </span>
          <a href="#contact_us">Contact Us</a>
        </p>
      </div>
    </div>


    <!-- navbar2_for_mobile -->

    <div class="navbar2_for_mobile">
      <div class="container">
        <p>
          <a href="#section_products">Products</a>
          <span class="the_line"> | </span>
          <a href="#section_products_services">Services</a>
          <span class="the_line"> | </span>
          <a href="#section_about_nuts_main">About Nuts</a> <br>
          <!-- <span class="the_line"> | </span> -->
          <a href="#contact_us">Contact Us</a>
        </p>
      </div>
    </div>

<div class="products" id="section_products">
      <p class="our_products_are_nuts">Our Products Are Nuts <br>& Spice</p>
      <p class="nuts_expl">
        Call us to get Nuts and Spices at a best quality <br />
        and also at a best price
      </p>
    </div>