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 Clarke Gallie
Clarke Gallie
1,581 Points

How do I remove site top and header elements ONLY on the home page?

Hello,

I am looking to make my home page a splash page and want a nice landing page with defined CTA's. My header and nav elements are in the way and I would like to remove them but only for my home page.

I can use the following CSS to remove them from all my pages:

div.site-top { display: none; }

div.header-top { display: none; }

But again I would only like to remove them from my home page. Any suggestions?

3 Answers

Steven Parker
Steven Parker
243,266 Points
Steven Parker
Steven Parker
243,266 Points

You could use that CSS only on the home page.

Instead of adding that CSS to the shared stylesheet file, what if you placed it in a <style> section directly on the home page itself?

And what mechanism causes the code to be shared among all pages? Can you just eliminate that section from the home page?

Máté Tóth-Csák
Máté Tóth-Csák
7,509 Points
Máté Tóth-Csák
Máté Tóth-Csák
7,509 Points

I would give a class to the header and nav (which displays them) on every html page, but give another class to the header of index.html, whit the display: none property.

Steven Parker
Steven Parker
243,266 Points
Steven Parker
Steven Parker
243,266 Points

I was assuming the code itself is shared among all pages.

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

If you have some control over the HTML, you could also add a class to the body tag when on the home page:

<body class="home">

And then use a descendent selector in your CSS to target those elements (not that I'm separating the two selectors with a comma, since they share the same rules):

.home .site-top,
.home .header-top {
  display: none;
}