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!

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

Gareth Redfern
Gareth Redfern
36,217 Points
Posted by Gareth Redfern
Gareth Redfern
36,217 Points

Responsive Fixed Header

Does anyone know of a simple solution to create a fixed header that works on a responsive site where the header height will alter depending on the screen width?

3 Answers

Shawn Denham
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points
Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

If I am understanding your question you could just use media queries and change the height of your header at the various break points you set up.

Gareth Redfern
Gareth Redfern
36,217 Points
Gareth Redfern
Gareth Redfern
36,217 Points

Thanks for the help on this guys I went with Shawn's suggestion. I don't think there is another simple way round it.

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Shawn's way is the correct way to do it.

Adam Sackfield
PLUS
Adam Sackfield
Pro Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Have a look at twitter bootstrap 3 they have it collapse to an icon. Im sure you could modify it in media queries to change height/