'How do I place a menu bar and logo inline with css

I have a menu bar that I am trying to float right, I also have a logo that I would like to keep to the left.

I have been able to get the menu to float to the right and keep the logo on the right however the menu is being pushed down in is not in line with the logo.

How do I get the menu in line with the logo?

menu error

If I put float left on the logo it leaves a weird gap at the top and messes up the layout.

weird error

Here is my code

    .navbar-collapse ul a {
        font-family: "Barlow", sans-serif;
        color: white;
        text-decoration: none;
        vertical-align: top;
      }
      .navbar-collapse ul a:hover {
        background-color: white;
        color: #23303e;
        border-radius: 50px;
        text-transform: uppercase;
        font-weight: 900;
        font-family: "Fraunces", serif;
        padding: 10px 30px 10px;
      }
    }

  .navbar-collapse ul {
    padding: 0;
    margin: 0;
    float: right;
    display: flex;
  }

      .navbar-collapse li {
        display: inline;
        float: left;
      }

  .logo {
    width: 20%;
    margin: 0 auto;
    padding: 7.5px 10px 7.5px 0;
  }
}

 <nav>
      <div class="container-fluid">
        <a class="nav-brand" href="#page-top"><img src="images/logo.svg" class="logo" alt="Sunnyside Logo"></a>
        <button class="navbar-toggle" type="button">
            <img src="images/icon-hamburger.svg" class="hamburger" alt="hamburger">
          </button>
        <div class="navbar-collapse">
          <ul>
            <li class="nav-link text-center"><a href="#">About</a></li>
            <li class="nav-link text-center"><a href="#">Services</a></li>
            <li class="nav-link text-center"><a href="#">Projects</a></li>
            <li class="nav-link text-center"><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>
htmlcss


Solution 1:[1]

You need to put display: flex for .container-fluid that helps all your menu items on the same line as logo. To align right for menu items, you should put margin-left: auto for .navbar-collapse

Here is the full code

.navbar-collapse ul a {
  font-family: "Barlow", sans-serif;
  color: white;
  text-decoration: none;
  vertical-align: top;
}

.container-fluid {
  display: flex;
}

.navbar-collapse {
  margin-left: auto;
}

.navbar-collapse ul a:hover {
  background-color: white;
  color: #23303e;
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: 900;
  font-family: "Fraunces", serif;
  padding: 10px 30px 10px;
}


}
.navbar-collapse ul {
  padding: 0;
  margin: 0;
  float: right;
  display: flex;
}
.navbar-collapse li {
  display: inline;
  float: left;
}
.logo {
  width: 20%;
  margin: 0 auto;
  padding: 7.5px 10px 7.5px 0;
}

}
<nav>
  <div class="container-fluid">
    <a class="nav-brand" href="#page-top"><img src="images/logo.svg" class="logo" alt="Sunnyside Logo"></a>
    <button class="navbar-toggle" type="button">
       <img src="images/icon-hamburger.svg" class="hamburger" alt="hamburger">
     </button>
    <div class="navbar-collapse">
      <ul>
        <li class="nav-link text-center"><a href="#">About</a></li>
        <li class="nav-link text-center"><a href="#">Services</a></li>
        <li class="nav-link text-center"><a href="#">Projects</a></li>
        <li class="nav-link text-center"><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions