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

HTML How to Make a Website Debugging HTML and CSS Problems How to Fix Problems with Code

Stella Widiasanti
Stella Widiasanti
1,566 Points
Posted by Stella Widiasanti
Stella Widiasanti
1,566 Points

Header looks different on the last page.

Hi there, I have this problem, that the Header on one of the pages doesn't look like on other pages. At first, I had 3 pages: Portfolio, About, Contact. I copy pasted the HTML from the index to both About and Contact pages. But in the Contact page, the Header went down several pixels. When I delete the Contact page, this problem appears now on the About page. I can't find anything wrong with my coding, and since I copy pasted the whole thing, it shouldn't actually go wrong. What happen here?

Second question, I want to have my navigation bar fixed on top of the page. I already googled and found out that I should use the syntax: position: sticky; But it doesn't work. If there's already a lesson about it here, could someone give me the link to the vid?

Thanks a lot!

5 Answers

498ut45f4jf4
498ut45f4jf4
9,919 Points

Hmm, sorry but I can't see any errors. I suggest instead of copying/pasting the index.html code into a new document, do a "Save as" instead. This makes sure that you do indeed have an exact copy of index.html.

This is called a sticky element and I would advise against using this method in the demo, it is not very cross browser compatible. You will need some sort of jQuery. Try http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/

498ut45f4jf4
498ut45f4jf4
9,919 Points
498ut45f4jf4
498ut45f4jf4
9,919 Points

Can you please post some code so that we can help you? It is impossible to see what is wrong with your code without looking at it.

Also, position:sticky does not exist, try position:fixed

Stella Widiasanti
Stella Widiasanti
1,566 Points
Stella Widiasanti
Stella Widiasanti
1,566 Points

Hi Jordan,

here's the CSS code:

/**************** HEADING ****************/ header { float: left; margin:0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

/**************** NAV ****************/

nav { text-align:center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 600; padding: 15px 10px; }

and the HTML:

<header>
  <a href="index.html" id="logo">
    <h1>Stella W Kusumohamijoyo</h1>
    <h2>Designer</h2>
  </a>
  <nav>
    <ul>
      <li><a href="index.html" class="selected">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </nav>
</header>

And yeah, i tried the position: fixed too, but it doesn't work the way I want it to be...

Stella Widiasanti
Stella Widiasanti
1,566 Points
Stella Widiasanti
Stella Widiasanti
1,566 Points

I want the navigation to work like this: http://theamazingweb.net/2013/09/19/postion-webkit-sticky-test/

So far I only have this CSS for my navigation:

nav { text-align:center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 600; padding: 15px 10px; }

Stella Widiasanti
Stella Widiasanti
1,566 Points
Stella Widiasanti
Stella Widiasanti
1,566 Points

Hi Jordan, Thank you so much for your advise. I will try this now.