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

Html – Is there a reason why the home button isn't on the same line as the rest of the nav bar options?

I’m making a navigation bar with dropdown features + a home button. But, the Home button stays on the very top right corner of the page, and not with the dropdown options. In this navigation bar, there should be a home button (to the left), with the 3 dropdown menus on the same line next to it. But, the home button goes on the very top right of the page and I’m not sure how to fix it. This was also taken from a Codepen example and changed to fit the theme and subject of my website.

This is what the navigation bar looks like right now:

header {
  height: 120px;
  position: sticky;
  top: 0;
  background-color: #21203d;
  float: left;
  z-index: 10;
}

.logo {
  max-width: 120px;
  margin-top: 5px;
  margin-bottom: 10px;
  margin-left: 20px;
  background-color: #21203d;
  width: 16%;
}

.navbar {
  background-color: #21203d;
  font-family: Franklin Gothic;
  display: inline-block;
  font-size: large;
  position: absolute;
  right: 0;
  margin-right: 30px;
}

.navbar a {
  color: white;
  text-decoration: none;
  font-size: large;
  float: right;
}

.dropdown {
  float: right;
  text-align: center;
  display: block;
  margin-top: 40px;
  font-size: large;
}

.dropdown .dropbtn {
  font-size: large;
  text-transform: uppercase;
  font-weight: bold;
  border: none;
  outline: none;
  color: white;
  padding: 15px;
  background-color: #21203d;
  margin: 0;
}
<header>
  <div class="wrapper">
    <img src="Images/Favicon.png" class="logo"><span class="color"></span>
    <nav class="navbar">
      <a href="Index.html">Home</a>
      <div class="dropdown">
        <button class="dropbtn">Aerospace Engineering</button>
        <div class="dropdown-content">

          <a href="">Aerodynamics</a>
          <a href="#">Aircraft</a>
          <a href="">Spacecraft</a>

        </div>
      </div>
      <div class="dropdown">
        <button class="dropbtn">Quantum Fields</button>
        <div class="dropdown-content">
          <a href="#">Mechanics</a>
          <a href="#">Physics</a>
          <a href="">Computing</a>
        </div>
      </div>
      <div class="dropdown">
        <button class="dropbtn">Astronomy</button>
        <div class="dropdown-content">
          <a href="#">The Stars</a>
          <a href="#">Galaxy Types</a>
          <a href="#">Black Holes</a>
        </div>
      </div>
    </nav>

  </div>

</header>
Tags:

2

Answers


  1. 0

    Alignment is disrupted by the combination of position: absolute and float: right. To correct this:

    • Use Flexbox for the navigation bar: set header and .navbar to display: flex;`.
    • Align items horizontally with align-items: center and use gap for spacing.
    • Remove float and absolute positioning for .navbar and .dropdown.

    Updated CSS

    header {
  height: 120px;
  position: sticky;
  top: 0;
  background-color: #21203d;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.logo {
  max-width: 120px;
  margin-right: 20px;
}

.navbar {
  display: flex;
  align-items: center;
  gap: 20px; /* Adds spacing between items */
}

.navbar a {
  color: white;
  text-decoration: none;
  font-size: large;
}

.dropdown {
  position: relative;
}

.dropdown .dropbtn {
  font-size: large;
  text-transform: uppercase;
  font-weight: bold;
  border: none;
  outline: none;
  color: white;
  padding: 15px;
  background-color: #21203d;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

    This aligns "Home" and dropdowns on the same line. Let me know if this helps!

    Login or Signup to reply.
  2. 0

    First Set Header width to 100%; then add home button inside a div with class and add style as you have added in dropdown with float left.

    i have tested it and adding the updated css,

    header {
  height: 120px;
  position: sticky;
  top: 0;
  background-color: #21203d;
  float: left;
  z-index: 10;
  width:100%;
}

.logo {
  max-width: 120px;
  margin-top: 5px;
  margin-bottom: 10px;
  margin-left: 20px;
  background-color: #21203d;
  width: 16%;
}

.navbar{
  background-color: #21203d;
  font-family: Franklin Gothic;
  display: inline-block;
  font-size: large;
  position: absolute;
  right: 0;
  margin-right: 30px;
}
.navbar a{
  color: white;
  text-decoration: none;
  font-size: large;
  float: right;
}

/* Added below class */
.no_dropdown{
  float: left;
  text-align:center;
  display: block;
  margin-top: 40px;
  font-size: large;
}
/* Added above class */
.dropdown{
  float: right;
  text-align:center;
  display: block;
  margin-top: 40px;
  font-size: large;
}
/* Added this class */.no_dropdown a,/* end */.dropdown .dropbtn{
  font-size: large;
  text-transform: uppercase;
  font-weight: bold;
  border: none;
  outline: none;
  color: white;
  padding: 15px;
  background-color: #21203d;
  margin: 0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search