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

CSS

Steef Vendy
Steef Vendy
9,436 Points
Posted by Steef Vendy
Steef Vendy
9,436 Points

Fixed Positioning Issue

Hi CSS masters,

Greeting from Newbie. I am having issue with fixed top positioning on my header when I applying this:

.main-header { position: fixed; width: 100%; top: 0; z-index: 100; }

A large part of my main navigation element is covered up by header, so I applied:

body { padding-top: 130px; }

As the result, it works fine on one page but the rest of the pages have top padding applied which is not what I want.

Please have a look on my web to understand more on the problem:

thesite.site

Please help.

Krzysztof Kucharzyk
seal-mask
.a{fill-rule:evenodd;}techdegree
Krzysztof Kucharzyk
Front End Web Development Techdegree Student 4,005 Points
Krzysztof Kucharzyk
.a{fill-rule:evenodd;}techdegree
Krzysztof Kucharzyk
Front End Web Development Techdegree Student 4,005 Points

Well for me your website looks fine, I don't really understand your problem.

If you want to get the same effect but applied only to wrapper not body change your #wrapper css to :

#wrapper {
    max-width: 940px;
    margin: 130px auto;
    padding: 0 5%;
    clear: both;
}

and delete padding-top from your body element.

3 Answers

Krzysztof Kucharzyk
seal-mask
.a{fill-rule:evenodd;}techdegree
Krzysztof Kucharzyk
Front End Web Development Techdegree Student 4,005 Points
Krzysztof Kucharzyk
.a{fill-rule:evenodd;}techdegree
Krzysztof Kucharzyk
Front End Web Development Techdegree Student 4,005 Points

You mean that it's not scrolling ? Cause to be honest this is the only difference I see on this both sites you linked :P I can see at both of your sites your header with navigation stick to the top without any empty space between top of the site and header

Steef Vendy
Steef Vendy
9,436 Points
Steef Vendy
Steef Vendy
9,436 Points

wait... what? Its really weird... the 1st time I tried on chrome it had the top padding therefore it created a white space before my header.... then now when I refreshed it couple of times the white padding is gone, it works perfectly fine... with safari my header isn't even fixed. but on mobile it works perfectly fine...

Krzysztof Kucharzyk
seal-mask
.a{fill-rule:evenodd;}techdegree
Krzysztof Kucharzyk
Front End Web Development Techdegree Student 4,005 Points
Krzysztof Kucharzyk
.a{fill-rule:evenodd;}techdegree
Krzysztof Kucharzyk
Front End Web Development Techdegree Student 4,005 Points

Yeah exactly :) But I suggest you to change padding-top in your body and apply this:

#wrapper {
    max-width: 940px;
    margin: 130px auto;
    padding: 0 5%;
    clear: both;
}

So this way only your wrapper will position 130px down from the top of the site instead of whole body.

Steef Vendy
Steef Vendy
9,436 Points
Steef Vendy
Steef Vendy
9,436 Points

Cool, it works consistently now. thanks!