Sticky nav bar appearing at top of page

[Source]

http://s21.postimg.org/uj9exz8fr/navbar.png

http://s21.postimg.org/l3y4yifsn/Mockup.png

The sticky nav bar im aiming for is not appearing at top of page, instead it is following the rest of the margin ive put on the :<div id="intro">

**HTML*

<div>
  <img src="filterfilm_logo" /> <ul>
    <li>
      <a href="#">Hjem</a>
    </li>
    <li>
      <a href="#">Hvorfor</a>
    </li>
    <li>
      <a href="#">Prosess</a>
    </li>
    <li>
      <a href="#">Kontakt</a>
    </li>
  </ul>
</div>
<div id="page-wrap">

<div id="main-content">

<div>
</div>

CSS

#page-wrap { width: 1000px; margin: 0px auto 15px; 10px background: white }

nav { position: fixed; z-index: 10px; margin-top:0px; width: 100%; height: 72px; background: #e4e7e5 }

nav ul {list-style:none;}

nav ul li a { height: 5em; line-height: 5em; width: 9em; display: block; border: 0.1em solid #dcdce9; color: #0d2474; text-decoration: none; text-align: center; list-style-type:none; } li {float: left;

}

intro { width: 100%; height: 400px; margin-top:100px; background: #e4e7e5 }

blockqoute { font: 30px Helvetica, Arial, Sans-serif; }

[Paulie_D]

A link or Codepen reduced case would be more helpful.

[Paulie_D]

The most obvious thing I can see is that you are using fixed positioning on the nav element…but you haven’t actually used one in your HTML!

:()

[Source]

Thanks for the quick reply ! Ive opened a codepen account now . Is there a more semantic way to add the sticky bar , or is the way ive started now “ok” ?

http://cdpn.io/rfbhq

Thanks

Source

[Paulie_D]

The bar is sticky now.

I think the nav could use some work.

I’ve made a reduced case in Codepen and made some assumptions regarding widths etc.

http://codepen.io/Paulie-D/pen/pwiAc

[Source]

Yes, this is awesome !!

Do you think a margin, to push the buttons over to the right side like in the mockup is a preferable way ?

[Paulie_D]

Margin?

No, there’s a better way….My Codepen has been updated.

I added, and centered, an extra div to the nav the same width as the content (intro) div so everything lines up.

I then floated the ul to the right to make sure it’s always on the right side of that new inner div.

Then to make the li’s line up I removed any float and made them inline-block. These are then made to push over to the right by adding text-align right to the parent ul.

Whew!

[Source]

Wow really appreciate it Paulie_D .

Im gonna have to study this, to make sure i get it.

If you ever need anything related to video, or animation let me know.

Great forum here, im gonna try not to hassle you guys too much.

Source

[Author]

Posts