3

First of all, I'm struggling how to title my question. I know it can be better.

So In my simple HTML page, I have 3 bookmarks which I link them by <a> tags:

<a href="#section1">HTML5</a>

I have a fixed header at the top of the page and I've set margin-top to the sections, so that they appear under the header.

header {
    width: 100%;
    height: 200px;
    position: fixed;
    top: 0px;
}
section {
    padding: 20px;
    margin-right: 200px;
    margin-top: 200px;
}

Now the problem is, when I clicke on the bookmark links, HTML tries to scroll to them and show them at the top of the page, which then will be masked by the header.

My question is, is there any way to tell the <a> tag to show the bookmark using some margins, so that it appears under the header?

JSFiddle sample

Ghasem
  • 14,455
  • 21
  • 138
  • 171
  • @Ardian yes you are right. I was able to fix it by applying `padding-top: 220px`. jsFiddle: https://jsfiddle.net/azizn/yxsq3uk1/ voting to close as duplicate – Aziz May 01 '16 at 17:02

1 Answers1

1

Thanks to this answer, I fixed the issue

/* add class="jumptarget" to all targets. */

I changed the answer in my favor and it solved the problem like a charm.

.jumptarget::before {
  content:"";
  display:block;
  height:220px; /* fixed header height*/
  margin:-50px 0 0; /* negative fixed header height */
}
Community
  • 1
  • 1
Ghasem
  • 14,455
  • 21
  • 138
  • 171