Html - How to fix my dropdown display overlapping with each other?

JacksonChassereau
September 4, 2024
116 views
0 votes
2 Answers

After a lot of struggle, I finally managed to get my dropdown buttons to display at the top of the screen, fit in the navbar, and appear next to each other. However, now the dropdown menus for both are overlayed on each other and both drop under the "About Us" section instead of their respective button.

Here is a screenshot of my site.

#headbar {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 2;
    border: 2px black solid;
    display: inline;
    background-color: #ff0000;
}

#logo {
  display: inline;
  height: 50px;
  width: 50px;
  border: none;
}

#title {
    display: inline;
    text-align: center;
    font-size: 20px;
    min-width: 100%;
    border: 2px solid black;
}

.button-container {
    display: flex;
    left: 190px;
    min-width: 100%;
    min-height: 50px;
    border: 2px solid black;
    top: 0;
    position: absolute;
}

#button-1 {
  background-color: red;
  color: white;
  padding: 15px 10px 15px 10px;
  font-size: 15px;
  text-align: center;
  font-weight: bold;
  display: inline;
  border: none;
  border: 2px solid black;
  height: 50px;
  width: 100px;
  position: relative;
}

#button-2 {
  background-color: red;
  color: white;
  padding: 15px;
  font-size: 15px;
  text-align: center;
  font-weight: bold;
  display: inline;
  border: none;
  border: 2px solid black;
  height: 50px;
  width: 100px;
  position: relative;
  left: 100px;
}

  .dropdown {
    position: absolute;
    display: inline-block;
  }
.dropdown-content a {
color: white;
padding: 8px 10px;
text-decoration: none;
display: block;
}
  
.dropdown-content a:hover {
background-color: #ff0000;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #ff0000;
}

<nav id="navbar">
<header id="headbar">
   <h1 id="title">DAILY</h1><img id="logo" src="https://i.ibb.co/C7wkQsw/DB-Logo.png" alt="Daily Bugle Logo"><h1 id="title">BUGLE</h1>
<div class="button-container">
   <div class="dropdown">
      <button class="dropbtn"  id="button-1">About Us</button>
      <div class="dropdown-content">
         <a class="nav-link" href="#Section_1">What We Are</a>
         <a class="nav-link" href="#Section_2">Journalist Oath</a>
         <a class="nav-link" href="#Section_3">Editors</a>
         <a class="nav-link" href="#Section_4">Writers</a>
         <a class="nav-link" href="#Section_5">Photographers</a>
      </div>
    </div>
    </div>
    <div class="button-container">
    <div class="dropdown">
      <button class="dropbtn" id="button-2">Politics</button>
      <div class="dropdown-content">
         <a class="nav-link" href="#Section_1">Super-Politics</a>
         <a class="nav-link" href="#Section_2">Local</a>
         <a class="nav-link" href="#Section_3">United States</a>
         <a class="nav-link" href="#Section_4">Global</a>
         <a class="nav-link" href="#Section_5">Galactic</a>
      </div>
    </div>
    </div>
</header>
</nav>

I’m not sure what to put for what I’ve tried because I’ve been messing with this for 2 hours and have a poor memory.

Answers

I would recommend you to read more about html and css while practicing. But lets talk about issue’s.

As a beginner avoid using position: absolute unless you know what you are doing. You can achieve any structure using display: flex so try to use that.

You have added many unnecessary css which I have removed and added required css to make logo and header align center which is display: flex, align-items: center and margin: 0 to h1. Below is working example. If you have any doubt please share in comments.

body {
  margin: 0;
  padding: 0;
}

.mainDiv {
  color: white;
  width: 100%;
  height: 100vh;
  background-color: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: center;
}

#headbar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 2;
  border: 2px black solid;
  background-color: #ff0000;
  /* Newly added */
  display: flex;
}

#logo {
  display: inline;
  height: 50px;
  width: 50px;
  border: none;
}

#button-1 {
  background-color: red;
  color: white;
  padding: 15px 10px 15px 10px;
  font-size: 15px;
  text-align: center;
  font-weight: bold;
  display: inline;
  border: none;
  border: 2px solid black;
  height: 50px;
  width: 100px;
  position: relative;
}

#button-2 {
  background-color: red;
  color: white;
  padding: 15px;
  font-size: 15px;
  text-align: center;
  font-weight: bold;
  display: inline;
  border: none;
  border: 2px solid black;
  height: 50px;
  width: 100px;
  position: relative;
  left: 100px;
}

.dropdown {
  position: absolute;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f68484;
  min-width: auto;
  box-shadow: 10px 8px 16px 0px black;
  z-index: 1;
}


/* Newly added */

.logo-container {
  display: flex;
  align-items: center;
}

.logo-container h1 {
  margin: 0
}

<div class="mainDiv">
  <nav id="navbar">
    <header id="headbar">
      <div class="logo-container">
        <h1 id="title">DAILY</h1><img id="logo" src="https://i.ibb.co/C7wkQsw/DB-Logo.png" alt="Daily Bugle Logo">
        <h1 id="title">BUGLE</h1>
      </div>
      <div class="button-container">
        <div class="dropdown">
          <button class="dropbtn" id="button-1">About Us</button>
          <div class="dropdown-content">
            <a class="nav-link" href="#Section_1">What We Are</a>
            <a class="nav-link" href="#Section_2">Journalist Oath</a>
            <a class="nav-link" href="#Section_3">Editors</a>
            <a class="nav-link" href="#Section_4">Writers</a>
            <a class="nav-link" href="#Section_5">Photographers</a>
          </div>
        </div>
      </div>
      <div class="button-container">
        <div class="dropdown">
          <button class="dropbtn" id="button-2">Politics</button>
          <div class="dropdown-content">
            <a class="nav-link" href="#Section_1">Super-Politics</a>
            <a class="nav-link" href="#Section_2">Local</a>
            <a class="nav-link" href="#Section_3">United States</a>
            <a class="nav-link" href="#Section_4">Global</a>
            <a class="nav-link" href="#Section_5">Galactic</a>
          </div>
        </div>
      </div>
    </header>
  </nav>
</div>

I have tried to fix all mistakes in your HTML and CSS. I have added JavaScript myself to make sure the dropdown appears accurately. I also have tried to keep the design same. I hope my efforts will resolve your issue.

Here is the updated code:

document.addEventListener("DOMContentLoaded", function () {
  const button1 = document.querySelector("#button-1");
  const button2 = document.querySelector("#button-2");

  button1.addEventListener("click", function () {
    const dropdownContent1 = button1.nextElementSibling;
    dropdownContent1.classList.toggle("show");

    if (dropdownContent1.classList.contains("show")) {
      const otherDropdowns =
        document.querySelectorAll(".dropdown-content");
      otherDropdowns.forEach((dropdown) => {
        if (dropdown !== dropdownContent1) {
          dropdown.classList.remove("show");
        }
      });
    }
  });

  button2.addEventListener("click", function () {
    const dropdownContent2 = button2.nextElementSibling;
    dropdownContent2.classList.toggle("show");

    if (dropdownContent2.classList.contains("show")) {
      const otherDropdowns =
        document.querySelectorAll(".dropdown-content");
      otherDropdowns.forEach((dropdown) => {
        if (dropdown !== dropdownContent2) {
          dropdown.classList.remove("show");
        }
      });
    }
  });
});

header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  border: 2px black solid;
  background-color: #ff0000;
}

#navbar {
  display: flex;
  align-items: center;
}

.logo-title {
  display: flex;
}

#logo {
  height: 50px;
  width: 50px;
  border: none;
}

.title {
  font-size: 20px;
  border: 2px solid black;
  margin: 0;
  display: flex;
  align-items: center;
}

.buttons {
  display: flex;
}

.drop-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  color: white;
  border: 2px solid black;
  height: 50px;
}

.dropdown-content-1,
.dropdown-content-2 {
  display: none;
  position: absolute;
  background-color: #f68484;
  min-width: 160px;
  box-shadow: 10px 8px 16px 0px black;
  z-index: 1;
  top: 100%;
}

.dropdown-content-1 .nav-link,
.dropdown-content-2 .nav-link {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.show {
  display: block;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Navbar</title>
  </head>
  <body>
    <header>
      <nav id="navbar">
        <div class="logo-title">
          <h1 class="title">DAILY</h1>
          <img
            id="logo"
            src="https://i.ibb.co/C7wkQsw/DB-Logo.png"
            alt="Daily Bugle Logo"
          />
          <h1 class="title">BUGLE</h1>
        </div>

        <div class="buttons">
          <div class="dropdown">
            <button class="drop-btn" type="button" id="button-1">
              About Us
            </button>
            <div class="dropdown-content-1">
              <a class="nav-link" href="#Section_1">What We Are</a>
              <a class="nav-link" href="#Section_2">Journalist Oath</a>
              <a class="nav-link" href="#Section_3">Editors</a>
              <a class="nav-link" href="#Section_4">Writers</a>
              <a class="nav-link" href="#Section_5">Photographers</a>
            </div>
          </div>

          <div class="dropdown">
            <button class="drop-btn" type="button" id="button-2">
              Politics
            </button>
            <div class="dropdown-content-2">
              <a class="nav-link" href="#Section_1">Super-Politics</a>
              <a class="nav-link" href="#Section_2">Local</a>
              <a class="nav-link" href="#Section_3">United States</a>
              <a class="nav-link" href="#Section_4">Global</a>
              <a class="nav-link" href="#Section_5">Galactic</a>
            </div>
          </div>
        </div>
      </nav>
    </header>
  </body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to fix my dropdown display overlapping with each other?

Answers