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

General Discussion

Posted by Seth Barthen
Seth Barthen
11,266 Points

"How to make a webpage" Header Question

Why does the Nav bar change size? Even in Nick's video... if he clicks to go to the homepage aka index.html.. it seems like the height of the header is slightly bigger than the about and contact page. Can someone help me understand that?

Thanks,

2 Answers

Dino Paškvan
PLUS
Dino Paškvan
Courses Plus Student 44,108 Points
Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

The index page has more (vertical) content so the scrollbars appear on the right side of the page, as opposed to other pages. In newer versions of Chrome the scrollbar overlays the webpage, but in older versions (like the one used in the video), that wasn't the case. Instead, the scrollbar would squeeze the content a bit, thus decreasing the window width. And in the case of that particular webpage, this squeezing/resizing effect is most noticeable on the header.

Seth Barthen
Seth Barthen
11,266 Points

Thanks for responding!. So is there a way to overcome this in CSS? I'm using Firefox and I notice this with my website as well.

Dino Paškvan
PLUS
Dino Paškvan
Courses Plus Student 44,108 Points
Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

Well, one solution would be to constantly show the scrollbar, even when it's not necessary by selecting the body in CSS and applying this rule: overflow-y: scroll.

Another solution would be to hide the overflow on the body and use something like this: nanoScroller.js.

To be honest, I never worried about it too much and most modern OS+browser combinations display "floating" scrollbars.

Seth Barthen
Seth Barthen
11,266 Points

That makes sense. My buddy tried showing me php. It seems like when you use php it gets rid of that kind of bug.

I'd like to learn php but I think I need to get a better grasp on HTML and CSS first :/