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

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?

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

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 >
        <a  href="#page-top"><img src="images/logo.svg"  alt="Sunnyside Logo"></a>
        <button  type="button">
            <img src="images/icon-hamburger.svg"  alt="hamburger">
          </button>
        <div >
          <ul>
            <li ><a href="#">About</a></li>
            <li ><a href="#">Services</a></li>
            <li ><a href="#">Projects</a></li>
            <li ><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>

CodePudding user response：

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 >
    <a  href="#page-top"><img src="images/logo.svg"  alt="Sunnyside Logo"></a>
    <button  type="button">
       <img src="images/icon-hamburger.svg"  alt="hamburger">
     </button>
    <div >
      <ul>
        <li ><a href="#">About</a></li>
        <li ><a href="#">Services</a></li>
        <li ><a href="#">Projects</a></li>
        <li ><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>