Question 301189 in Html Question posted in
Some basic documentation can be found here.

Html – Nav bar menu items overlap existing content on the page

I found a good-looking nav and copied it from the Internet. On the page Angebot.php there is a form and when I open the nav, the menu items overlap the existing content on the page. I want that the existing content on the page vanishes or gets put in the background so it doesn’t interrupt the menu items. I don’t know how to do it. Dose someone have a solution?

I don’t know if I described it well, but I hope you know what I mean.

nav bar when closed

Nav bar when opend

*,
body,
html {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

form {
  width: 300px;
  margin: 0 auto;
}

label {
  display: block;
  margin-top: 20px;
}

select {
  width: 100%;
  height: 30px;
}

input[type="submit"] {
  margin-top: 20px;
  width: 100%;
  height: 30px;
}


/* Navigation */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
  font-family: "Poppins", sans-serif;
}

.container {
  max-width: 1050px;
  width: 90%;
  margin: auto;
}

.navbar {
  width: 100%;
  box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
}

.navbar .menu-items {
  display: flex;
}

.navbar .nav-container li {
  list-style: none;
}

.navbar .nav-container a {
  text-decoration: none;
  color: #0e2431;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 0.7rem;
}

.navbar .nav-container a:hover {
  font-weight: bolder;
}

.nav-container {
  display: block;
  position: relative;
  height: 60px;
}

.nav-container .checkbox {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  top: 20px;
  left: 20px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.nav-container .hamburger-lines {
  display: block;
  height: 26px;
  width: 32px;
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-container .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #0e2431;
}

.nav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

.navbar .menu-items {
  padding-top: 120px;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  height: 100vh;
  width: 100%;
  transform: translate(-150%);
  display: flex;
  flex-direction: column;
  margin-left: -40px;
  padding-left: 50px;
  transition: transform 0.5s ease-in-out;
  text-align: center;
}

.navbar .menu-items li {
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.logo {
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 1.2rem;
  color: #0e2431;
}

.nav-container input[type="checkbox"]:checked~.menu-items {
  transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked~.hamburger-lines .line1 {
  transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked~.hamburger-lines .line2 {
  transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked~.hamburger-lines .line3 {
  transform: rotate(-45deg);
}

.nav-container input[type="checkbox"]:checked~.logo {
  display: none;
}
<body>
  <nav>
    <div class="navbar">
      <div class="container nav-container">
        <input class="checkbox" type="checkbox" name="" id="" />
        <div class="hamburger-lines">
          <span class="line line1"></span>
          <span class="line line2"></span>
          <span class="line line3"></span>
        </div>
        <div class="logo">
          <h1>Navbar</h1>
        </div>
        <div class="menu-items">
          <li><a href="index.php">Home</a></li>
          <li><a href="Angebot.php">Angebot</a></li>
          <li><a href="UeberUns.php">Über uns</a></li>
          <li><a href="Kontakt.php">Kontakt</a></li>
        </div>
      </div>
    </div>
  </nav>
  <form action="process.php" method="post">
    <label for="cpu">CPU (Cores):</label>
    <select id="cpu" name="cpu">
      <option value="5">1 Core - 5 CHF</option>
      <option value="10">2 Cores - 10 CHF</option>
      <option value="18">4 Cores - 18 CHF</option>
      <option value="30">8 Cores - 30 CHF</option>
      <option value="45">16 Cores - 45 CHF</option>
    </select>

    <label for="ram">RAM (MB):</label>
    <select id="ram" name="ram">
      <option value="5">512 MB - 5 CHF</option>
      <option value="10">1024 MB - 10 CHF</option>
      <option value="20">2048 MB - 20 CHF</option>
      <option value="40">4096 MB - 40 CHF</option>
      <option value="80">8192 MB - 80 CHF</option>
      <option value="160">16384 MB - 160 CHF</option>
      <option value="320">32768 MB - 320 CHF</option>
    </select>
    <label for="ssd">SSD (GB):</label>
    <select id="ssd" name="ssd">
      <option value="5">10 GB - 5 CHF</option>
      <option value="10">20 GB - 10 CHF</option>
      <option value="20">40 GB - 20 CHF</option>
      <option value="40">80 GB - 40 CHF</option>
      <option value="120">240 GB - 120 CHF</option>
      <option value="250">500 GB - 250 CHF</option>
      <option value="500">1000 GB - 500 CHF</option>
    </select>

    <input type="submit" value="Bestellen">
  </form>
</body>
Tags:

2

Answers


  1. 0

    If your navigation bar menu items are overlapping existing content on your web page, there are a few common reasons for this issue. Here are some steps you can take to troubleshoot and fix the problem:

    1. Check CSS Styles:

      • Inspect the styles applied to your navigation bar and ensure that there are no conflicting styles that might be causing the overlap. Pay attention to properties like position, margin, padding, and z-index.
      • Use browser developer tools to inspect the elements and their styles. Look for any unexpected or conflicting styles that might be causing the overlap.

    2. Check Z-Index:

      • If you have other elements on your page with a higher z-index than the navigation bar, they may overlap the menu items. Make sure the navigation bar has a sufficient z-index to ensure it appears above other elements.

    3. Positioning:

      • Ensure that the positioning of your navigation bar is correct. Common positioning values are static, relative, absolute, and fixed. Depending on your layout, you may need to adjust these values.

    4. Overflow Property:

      • Check the overflow property for both the navigation bar and the content. It might be necessary to set overflow: hidden; or overflow: auto; on the container to prevent content from overflowing and overlapping.

    5. Margins and Padding:

      • Double-check the margins and padding of both the navigation bar and the surrounding elements. In some cases, excessive margins or padding can lead to unexpected overlaps.

    6. Responsive Design:

      • If you have a responsive design, make sure that your styles are appropriately adjusted for different screen sizes. Overlapping issues may arise on smaller screens if your styles are not responsive.

    7. JavaScript or jQuery Conflicts:

      • If you are using JavaScript or jQuery for any interactive elements, check for any errors in the console that might be affecting the layout.

    8. Clear Floats:

      • If you’re using floated elements, ensure that you are clearing the floats properly. This is often necessary to prevent layout issues.

    9. Testing in Different Browsers:

      • Test your web page in different browsers to see if the issue is specific to a particular browser. Browser-specific quirks can sometimes cause layout problems.

    10. Update or Reset CSS:

      • If you’re using a CSS framework or library, make sure you’re using the correct versions. You may also consider resetting styles using a CSS reset or normalize.css to ensure consistent styling across different browsers.

    By carefully examining these aspects, you should be able to identify and resolve the issue causing the overlap in your navigation bar menu items.

    Login or Signup to reply.
  2. 0

    Just put a white background on the menu.

    .menu-items {
  background: white;
}

*,
body,
html {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

form {
  width: 300px;
  margin: 0 auto;
}

label {
  display: block;
  margin-top: 20px;
}

select {
  width: 100%;
  height: 30px;
}

input[type="submit"] {
  margin-top: 20px;
  width: 100%;
  height: 30px;
}


/* Navigation */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
  font-family: "Poppins", sans-serif;
}

.container {
  max-width: 1050px;
  width: 90%;
  margin: auto;
}

.navbar {
  width: 100%;
  box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
}

.navbar .menu-items {
  display: flex;
}

.navbar .nav-container li {
  list-style: none;
}

.navbar .nav-container a {
  text-decoration: none;
  color: #0e2431;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 0.7rem;
}

.navbar .nav-container a:hover {
  font-weight: bolder;
}

.nav-container {
  display: block;
  position: relative;
  height: 60px;
}

.nav-container .checkbox {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  top: 20px;
  left: 20px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.nav-container .hamburger-lines {
  display: block;
  height: 26px;
  width: 32px;
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-container .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #0e2431;
}

.nav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

.navbar .menu-items {
  padding-top: 120px;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  height: 100vh;
  width: 100%;
  transform: translate(-150%);
  display: flex;
  flex-direction: column;
  margin-left: -40px;
  padding-left: 50px;
  transition: transform 0.5s ease-in-out;
  text-align: center;
}

.navbar .menu-items li {
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.logo {
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 1.2rem;
  color: #0e2431;
}

.nav-container input[type="checkbox"]:checked~.menu-items {
  transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked~.hamburger-lines .line1 {
  transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked~.hamburger-lines .line2 {
  transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked~.hamburger-lines .line3 {
  transform: rotate(-45deg);
}

.nav-container input[type="checkbox"]:checked~.logo {
  display: none;
}
    <body>
  <nav>
    <div class="navbar">
      <div class="container nav-container">
        <input class="checkbox" type="checkbox" name="" id="" />
        <div class="hamburger-lines">
          <span class="line line1"></span>
          <span class="line line2"></span>
          <span class="line line3"></span>
        </div>
        <div class="logo">
          <h1>Navbar</h1>
        </div>
        <div class="menu-items">
          <li><a href="index.php">Home</a></li>
          <li><a href="Angebot.php">Angebot</a></li>
          <li><a href="UeberUns.php">Über uns</a></li>
          <li><a href="Kontakt.php">Kontakt</a></li>
        </div>
      </div>
    </div>
  </nav>
  <form action="process.php" method="post">
    <label for="cpu">CPU (Cores):</label>
    <select id="cpu" name="cpu">
      <option value="5">1 Core - 5 CHF</option>
      <option value="10">2 Cores - 10 CHF</option>
      <option value="18">4 Cores - 18 CHF</option>
      <option value="30">8 Cores - 30 CHF</option>
      <option value="45">16 Cores - 45 CHF</option>
    </select>

    <label for="ram">RAM (MB):</label>
    <select id="ram" name="ram">
      <option value="5">512 MB - 5 CHF</option>
      <option value="10">1024 MB - 10 CHF</option>
      <option value="20">2048 MB - 20 CHF</option>
      <option value="40">4096 MB - 40 CHF</option>
      <option value="80">8192 MB - 80 CHF</option>
      <option value="160">16384 MB - 160 CHF</option>
      <option value="320">32768 MB - 320 CHF</option>
    </select>
    <label for="ssd">SSD (GB):</label>
    <select id="ssd" name="ssd">
      <option value="5">10 GB - 5 CHF</option>
      <option value="10">20 GB - 10 CHF</option>
      <option value="20">40 GB - 20 CHF</option>
      <option value="40">80 GB - 40 CHF</option>
      <option value="120">240 GB - 120 CHF</option>
      <option value="250">500 GB - 250 CHF</option>
      <option value="500">1000 GB - 500 CHF</option>
    </select>

    <input type="submit" value="Bestellen">
  </form>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search