Trying to align all the content within my navigation bar

Question

I've been stuck with the problem of trying to align all the content (logos, links and facebook icon) on my navigation bar to all be vertically centered. I've done some research and a good topic from StackOverflow came up, which can be found here: How do I vertically center text with CSS?

I've tried the suggested ideas all to no avail. I'm really at a loss with this one and would appreciate any help in making my navigation look good across multiple browsers (mobile devices also).

Another issue I've come up with is being able to add content in the main body of the webpage. As you can see in the codepen below, some of the content written in the body is hidden by the header. I can add line breaks to fix this but I'm 90% sure the way I've laid out my content (header, main, footer all enclosed in body tags) is incorrect.

CodePen

Here is what I've done to try and fix the problem: headerLeft refers to the logo to the left of the links, and headerRight is vice versa. The header tag had a class of verticalAlignHelper but it seemed to do nothing so verticalAlignHelper isn't really being used now.

.headerLeft {
    margin-left: 30px;
    margin-right: 40px;
    float: left;
    height: 100%;
    margin-bottom: 0.25em;
    vertical-align: middle;
}


.headerRight {
    margin-left: 30px;
    margin-right: 40px;
    float: right;
    height: 100%;
    margin-bottom: 0.25em;
    vertical-align: middle;
}


verticalAlignHelper {
    vertical-align: middle;
    line-height: 150px;
    height: 150px;
}

Any advice is much appreciated. This is my first website so I'd appreciate if the advice was as basic as can be. Cheers.

Answer 1

Prevent covered-up body content

Use JavaScript to set a padding-top on body, just larger than the top height. Like so:

$("body").css("padding-top", $("nav").height() + 25);

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>Navbar</nav>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>

Fix vertical alignment of nav-bar images

Because I can't see the images, the following are only suggestions:

1. Easiest: Make the navigational bar the same height as the image (or vice versa)
2. Manually hard-code margins in (only if you know exact heights of everything)
3. Hardest but best Use JavaScript (dynamic and fun)

$(function() {
  var elem = $("#img4");
  elem.css("margin-top", (elem.parent().height()-elem.height())/2);
});

* {
  box-sizing: border-box;
}
body, html {
  margin: 0;
  padding: 0;
}
img {
  height: 75px;
}
div.navbar {
  width: 100%;
  height: 100px;
  background-color: lightgrey;
  margin-bottom: 20px;
}
div.text {
  line-height: 100px;
  display: inline-block;
  vertical-align: top;
}

img#img1 {
  height: 100px;
}

div#div2 {
  height: 75px;
}
div#text2 {
  line-height: 75px;
}

img#img3 {
  margin: 12.5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
  <img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" />
  <div class="text">Uncentered image</div>
</div>
<div class="navbar">
  <img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img1" />
  <div class="text">Centered by making image full height</div>
</div>
<div class="navbar" id="div2">
  <img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" />
  <div class="text" id="text2">Centered by making div same height as image</div>
</div>
<div class="navbar">
  <img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img3" />
  <div class="text">Centered using manual <code>margin</code> manipulation</div>
</div>
<div class="navbar">
  <img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img4" />
  <div class="text">Centered using JS and jQuery (dynamic)</div>
</div>