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 trialStella Widiasanti
1,566 PointsHeader 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
9,919 PointsHmm, 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
9,919 PointsCan 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
1,566 PointsHi 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
1,566 PointsI 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
1,566 PointsHi Jordan, Thank you so much for your advise. I will try this now.