0

I'm trying to make a nav bar with an image and I'm having trouble with the image affecting the alignment of the other elements in the nav bar. I can't get the links to be flush with the very top of the page. If I remove the image there is no issue.

.logo {
  max-height: 80px;
  border-radius: 80px;
}

.link-group-wrapper {
  display: inline;
  margin: 0;
  padding: 0;

}

.link-wrapper {
  list-style: none;
  text-align: center;
  font-size: 1.2em;
  background-color: #0b215c;
  width: 120px;
  display: inline-block;
  height: 90px;
  line-height: 90px;
}

.link {
  color: white;
  display: block;
  text-decoration: none;


}
<div class="navbar-wrapper">
  <img class="logo" src="https://image.ibb.co/cVNZww/logo.jpg">
  <ul class="link-group-wrapper">
    <li class="link-wrapper">
      <a class="link" href="">Roster</a>
    </li>
    <li class="link-wrapper">
      <a class="link" href="">Roster</a>
    </li>
    <li class="link-wrapper">
      <a class="link" href="">Roster</a>
    </li>
  </ul>
</div>
NewDev
  • 81
  • 6

1 Answers1

0

Easy fix ! Just put the image html element after your nav bar and add a float style to it (float: left;) with CSS

.logo {
  max-height: 80px;
  border-radius: 80px;
}

.link-group-wrapper {
  display: inline;
  margin: 0;
  padding: 0;

}

.link-wrapper {
  list-style: none;
  text-align: center;
  font-size: 1.2em;
  background-color: #0b215c;
  width: 120px;
  display: inline-block;
  height: 90px;
  line-height: 90px;
}

.link {
  color: white;
  display: block;
  text-decoration: none;


}
<div class="navbar-wrapper">
  <ul class="link-group-wrapper">
    <li class="link-wrapper">
      <a class="link" href="">Roster</a>
    </li>
    <li class="link-wrapper">
      <a class="link" href="">Roster</a>
    </li>
    <li class="link-wrapper">
      <a class="link" href="">Roster</a>
    </li>
  </ul>
<img class="logo" style="float: left; "src="https://image.ibb.co/cVNZww/logo.jpg">
</div>
Miloertas
  • 320
  • 1
  • 3
  • 10