Search code examples
csshtmlsemantic-markup

Resolving overlap between fixed header and first section

I am coding up a landing page with the classical setup :

  • A fixed header
  • Several sections (product description, testimonials, google map, etc.)
  • A footer

My semantics look like this :

<header>
  <!-- Responsive navigation bar -->
</header>
<section class="section-first">
  <!-- First section -->
</section>
<section>
</section>
...
<footer>
</footer>

As the header is fixed, I need a specific CSS treatment on the first section, as such :

.section-first {
    margin-top: 200px;
}

so that the header and the first section do not overlap. So eventually my first section needs to be treated differently than others. My current approach seems like a tweak to me, there should be either a semantical way to approach this or a clean CSS market practice in such common situation. Any ideas ?

Solution

  • You could use the :first-of-type pseudo element!

    section:first-of-type{
    margin-top:200px;
}

    This finds the first section tag in your HTML without having to add an extra class to it and only applies the written styles to that one.