Question

How to Align a Home Button and Dropdown Menus on the Same Line in a Navigation Bar?

I'm having an issue with aligning a Home button and dropdown menus on the same line in a navigation bar. Can someone please help me fix this?

Answer 1

Using CSS Flexbox, you can center a Home button and dropdown menus on the same line within a navigation bar.
HTML Structure
Put all your navigation items- Home button and dropdown menus in a <div> or <nav> container
Add a class to your navigation container for styling.
CSS Styling
Set the navigation container to have a property of display: flex.
Apply align-items: center and justify-content: space-between to vertically center items and space them evenly.
If necessary, adjust margins or padding to add more space between elements.
Example :

<nav class="navbar">
  <a href="#" class="home-button">Home</a>
  <div class="dropdown">
    <button class="dropbtn">Menu</button>
    <div class="dropdown-content">
      <a href="#">Food</a>
      <a href="#">Drinks</a>
    </div>
  </div>
</nav>

.navbar {
  display: flex;
align-items: center;
  justify-content: space-between;
  background-color: #333;
  padding: 10px;
}

.home-button,.dropbtn {
  color: white;
  text-decoration: none;
  padding: 10px;
}
.dropdown {
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
}
.dropdown:hover.dropdown-content {
  display: block;
}