Product Landing Page still in theair: use scroll-margin-top

HTML-CSS
1

First of all, I should say, the page passed the test for fCC certification but it looks miserable and has mistakes.

My first mistake was using the fCC app to make the site (it looks totally different on my localhost and codepen.

but I first have a problem with scroll-margin-top.

As I have a header that is (supposed to be) fixed to the top, when I click the link, the content goes straight to the top. I want to use scroll-margin-top to offset the content from the top and thus not be hidden by the header. but it doesn’t work. Can anyone explain me why?

2

In terms of your header, it can be stuck to the top of the viewport, without encroaching on other content, simply by changing its top value (which is currently set to 1) to 0.

1 Like
3

thank you, I changed that, so at least one problem is solved. Now for the rest.

1 Like
4

okay, I kept on searching and finally found what I was looking for.
Apparently, there is the option to use ::target (pseudo-class)
I used the scroll-margin-top inside the css pseudo class and it worked.
For people interested, I will adapt the codepen so you can see how it works.

5

You can use scroll-padding-top on the html element instead.

Also, if you use position sticky instead of fixed, you avoid some of the issues you otherwise get with “out of flow” fixed elements.

As an aside, I would let the header content dictate the height. You can set a min-height, but I wouldn’t suggest you keep “manually” adjusting the header using so many media queries.

Example 
<header>
  <nav>
    <a href="#1">Link to section 1</a>
    <a href="#2">Link to section 2</a>
    <a href="#3">Link to section 3</a>
    <a href="#4">Link to section 4</a>
  </nav>
</header>
<section id="1">1</section>
<section id="2">2</section>
<section id="3">3</section>
<section id="4">4</section>

html {
  scroll-padding-top: 80px;
}

body {
  margin: 0;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80px;
  position: sticky;
  top: 0;
  background-color: rebeccapurple;
}

nav {
  display: flex;
}

a {
  display: block;
  padding: 2rem;
  color: #f1f1f1;
}

section {
  height: 100vh;
  background-color: orange;
}