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

Posted by Paul Murphy
Paul Murphy
6,162 Points

Collapsing header

Hi Guys,

To give you a brief outline of the site I am trying to build...

A fixed header state which include a main nav with 4 links then a secondary nav which consists of images as links which is outside of the header section. As it stands the first image in the secondary nav is partially hidden behind what I presume the collapsing header section.

Interestingly when I resize my browser to check the state of the site in different viewports then come to resize my browser to my desktops screen resolution the header then swallows the whole of the first image completely.

Any help would be appreciated, Thanks in advance!

Yorick Toma
Yorick Toma
742 Points

Do you got a live version ? Or ability to JSFiddle it ?

Yorick Toma
Yorick Toma
742 Points

Do you got a live version ? Or ability to JSFiddle it ?

Paul Murphy
Paul Murphy
6,162 Points

I have copied the code to codepen but the images haven't loaded as they aren't hosted on a server yet they're all offline

http://cdpn.io/AibeC

the images are all sized 280 * 185

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Paul,

Your header isn't collapsing. The header would collapse if it contained floated children and you didn't do anything to make it contain the floats. It looks like you're using the clearfix hack which is one way.

From 768px and up your header has fixed positioning which means it is removed from the document flow. So your secondary nav will run all the way up to the top of the page because it's as if the header isn't there and then the header ends up covering your secondary nav. It's there on the rendered page but not part of the document flow.

So you have to compensate for this with margins or padding which will push your secondary nav below the header.

You have the following css:

body {
    padding-top: 75px;
}

That's one way to do it but the top padding needs to match the height of the header. So increase it until all of your second nav is showing.

Another way to do it is give a top margin to your secondary nav equal to the height of the header. This pushes it down from the top so it's not covered by the header anymore.

Somebody else had that exact same css too right down to the number of pixels. Did this come from a project on treehouse?

Paul Murphy
Paul Murphy
6,162 Points

Hi Jason, I increased the pixels on padding-top in the body selector which has worked so thanks for that! Yes I'm using the code as boiler plate from a Guil's deep dive on building a responsive site.

Thanks for your help! Much appreciated.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

Thanks, that makes more sense now. It was too much of a coincidence that two people had used 75px.

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

can you upload the images?