Help with creating a "persistent navigation bar"?

Question

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.

HTML:

<body>
    <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>
        </div>
        <ul class="main-nav">
          <li>Home</li>
          <li>Portfolio</li>
          <li>Blog</li>
          <li>CV</li>
          <li>Contact</li>
        </ul>
      </header>
    </div>
  </body>

CSS:

 /***********************************
GENERAL
***********************************/
html {

}

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

/***********************************
HEADER
***********************************/

#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 =/

Answer 1 · 2014-03-06T03:25:33Z

March 6, 2014 3:25am

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.

Answer 2 · 2014-03-06T03:13:42Z

March 6, 2014 3:13am

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.

Answer 3 · 2014-03-06T14:15:23Z

March 6, 2014 2:15pm

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?

Welcome to the Treehouse Community

Looking to learn something new?

meurigbird

meurigbird

Help with creating a "persistent navigation bar"?

3 Answers

Paul Mather

Paul Mather

Paul Mather

Paul Mather

meurigbird

meurigbird