JBond4546 JBond4546 - 1 year ago 54
CSS Question

Logo and Navigation Bar inline

I've been attempting to fix this issue for a few hours now, to no avail. I've browsed numerous different websites for answers, and i'm drawing a blank.

Im basically attempting to line both the logo, and the navigation bar links (the menu), together so they line up.
The navigation bar links should center vertically with the logo.

I can do it manually, by setting the exact pixels etc, but obviously this isn't much use. I have also tried having the logo as an li element, or it's own seperate div but i can't seem to get it to work.

Any help would be greatly appreciated, alongside potentially a writeup as to where I am going wrong.

Thank you.

JSFiddle: https://jsfiddle.net/rLL36dz6/

HTML




<img class="logo" src="http://i.imgur.com/z38lrml.png" border="0 "width="7%"/>

<ul class="nav_bar_links_ul">

<li class="dropdown menulinks">
<a href="#" class="dropbtn">Games</a>
<div class="dropdown-content">
<a href="#">Game 1</a>
</div>
</li>

<li class="dropdown menulinks">
<a href="#" class="dropbtn">Websites</a>
<div class="dropdown-content">
<a href="#">Website 1</a>
<a href="#">Website 2</a>
</div>
</li>

<li class="dropdown menulinks">
<a href="#">About</a>
<div class="dropdown-content">
<a href="#">Meet the Team</a>
<a href="#">About 2</a>
</div>
</li>

<li class="twi">
<a href="#"><img src="http://i.imgur.com/kuCMtoG.png" border="0" width="2%" height="2%" /></a>
</li>
<li class="twi">
<a href="#"><img class="fb" src="http://i.imgur.com/vldeLpR.png" border="0" width="1.6%" height="1.6%" /></a>
</li>
</ul>
</div>




CSS can be found on fiddle

Answer Source

Wrap your logo in a container:

 <div class="logo">
      <img class="logo" src="http://i.imgur.com/z38lrml.png" />
 </div>

Set it to display: inline-block and vertical-align: middle.

Also ensure the image fits the container correctly.

.logo {
  display: inline-block;
  vertical-align: middle;
  width: 7%;
}

.logo img {
  height: auto;
  width: 100%;
}

Wrap your nav in a container;

<div class="nav">
  <ul class="nav_bar_links_ul">
    ...
  </ul>
</div>

Also set this to display: inline-block and vertical-align: middle.

Give it a width less than the image so that it can fit beside it in the container.

.nav {
  display: inline-block;
  vertical-align: middle;
  width: 90%;
}

JSFIDDLE

If you choose to align your menu to the right you can add

.nav {
  text-align: right;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download