Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Help with creating a "persistent navigation bar"?

Well, stuck on the part before making it persistent (scrolls with your view port.) trying to write my first portfolio website from scratch but I can't even get the main header section laid out properly... even after looking at most of the css content.

It seems that even though I have set a height of 60px on the header, when I try to vertical-align: middle; my .logo-text div and .main-nav to their parent element (header) they do not move to the 30px point of the 60px header ... which is the parent right?

an image of the current situation: http://imgur.com/aAaXr60

It seems they are centred but the <header> seems to be 120 px (only half showing) ... which is not my intention. My intention is for this whole header to only be 60px in height, with the name/title centered to the left after the image, and the nav list on the right to be centred too.

I tried using float left and float right instead of the display: methods.... but then the name/title is permanently glued to the top-left next to the image... with no way to move it down let alone centre it.

I was trying to do it similar to how its done in the new CSS Layouts series ... but no luck... not quite clicking.


    <div class="main-wrapper">
      <header id="main-header">
        <img src="img/logo.png">
        <div class="logo-text">
          <h1>Meurig Bird</h1>
          <h2>Front End Web Developer</h2>
        <ul class="main-nav">


html {


.main-wrapper {
  margin: 0 auto;
  width: 1000px;


#main-header {
  width: 100%;
  height: 60px;
  max-height: 60px;
  display: inline-block;

#main-header img {
  height: 60px;
  width: 60px;
  display: inline;

.logo-text {
  display: inline-block;
  vertical-align: middle;
  line-height: 15px;

.logo-text h1,
.logo-text h2 {
  font-size: 15px;
  margin: 0;

.main-nav {
  display: inline-block;

.main-nav li {
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
  margin-right: 1em;

I'm obviously missing the whole idea of all this layout headache at the moment, any advice would be appreciated :P

Information overload I know =/

3 Answers

Check out this jsfiddle... http://jsfiddle.net/BK4Fc/

You will one element is floated left and the .logo-text div is given a 100% height to take up the height of the container. Then there's a multitude if ways to line up the text - either by giving it a margin-top or by giving it an applicable line-height. In this instance i've used line-height on the h1 and h2 tags to line it up accordingly.

Try adding float: left; to #main-header img. It won't naturally line up since you're not using a grid system, so adding the float left is a good way to fix your issue.

Thank You! just wondering about Vertical-Align though, any ideas why that doesn't work? am I mis-using it? I figured any dv inside another div would be vertical centred within its parent div? but that does not seem to be the case here?