Seb Seb - 19 days ago 6
CSS Question

HTML5 - Logo not centred on Nav bar

I'm new to stackoverflow so please bare with me if I don't explain something correctly.

I've created a HTML5 website for the company I work for which is currently live, but I'm having an issue with the logo in the nav bar. The issue I'm having is that the logo is not centred to the nav bar with the menu links.

I kinda figured out that some of the words in the nav bar are different widths which is caused the logo to drift to the left. But there must be a way to stop this from happening right?

Photo - Nav Bar with Logo

If someone should shed some light on how to solve this would be much appreciated. I've searched online and went through lots of forums and topics but couldn't find a answer.

Live link to site: http://www.ebigpicture.digital

Answer

As you are using Bootstrap, did you considered dividing the navbar in 3 columns? Left options - Logo - Right options.

Maybe a col 5 -> col 2 -> col 5 would work.

<div class="collapse navbar-collapse" id="main-menu">
<ul class="nav navbar-nav navbar-left">
<li><a href="#home">HOME</a></li>
<li><a href="#about">SERVICES</a></li>
<li><a href="#clients">CLIENTS</a></li>
<li><a href="#services">THE PATH</a></li>
</ul>
<a class="site-logo" href="index.html">
<img class="logo-size" src="http://www.ebigpicture.digital/img/logo-blue.png" alt="logo">
</a>
<ul class="nav navbar-nav navbar-right">
<li><a href="#story">CASE STUDIES</a></li>
<li><a href="#facts">SOLUTION</a></li>
<li><a href="#testimonial">TESTIMONIALS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>

Would turn into something like:

<div class="collapse navbar-collapse" id="main-menu">
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
  <ul class="nav navbar-nav navbar-left">
<li><a href="#home">HOME</a></li>
<li><a href="#about">SERVICES</a></li>
<li><a href="#clients">CLIENTS</a></li>
<li><a href="#services">THE PATH</a></li>
</ul>  
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
    <a class="site-logo" href="index.html">
<img class="logo-size" src="http://www.ebigpicture.digital/img/logo-blue.png" alt="logo">
</a>
</div>
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
<ul class="nav navbar-nav navbar-right">
<li><a href="#story">CASE STUDIES</a></li>
<li><a href="#facts">SOLUTION</a></li>
<li><a href="#testimonial">TESTIMONIALS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>

I know you just show the full navbar in md and lg sizes... so you could remove the xs xm cols in the divs.