Offsetting link within same page

Question

I have a menu bar at the top that has links as below:

<a href="#1">Football</a>
<a href="#2">Cricket</a>
<a href="#3">Rugby</a>
<a href="#4">Tennis</a>

I have a fixed menu bar that is 50px in height. When the links are clicked, the headings are hidden behind the fixed menu bar. Is it possible to have the headings be displayed 50px lower (so they can show) when its corresponding link is clicked.

html:

<h2 class="menuheading" id="1">Football</h2>
...
<h2 class="menuheading" id="2">Cricket</h2>
...
<h2 class="menuheading" id="3">Rugby</h2>
...
<h2 class="menuheading" id="4">Tennis</h2>

Fabrizio Calderan · Accepted Answer · 2013-10-22T15:44:49.783

1

you may apply always a padding-top/margin-top to your headings or (in modern browser) only when they are targetted — as you asked, e.g.

h2:target {
  padding-top: 50px;
}

Further information about :target pseudoclass on MDN

edited Oct 22 '13 at 15:44

answered Oct 22 '13 at 15:38

Fabrizio Calderan

120,726
26
164
177

As you answered first, you get the best answer! Thanks for the help – M9A Oct 22 '13 at 16:03

score 0 · Answer 2 · answered Oct 22 '13 at 15:38

0

Add this to your CSS style for menuheading

.menuheading {
  margin-top:50px;
}

answered Oct 22 '13 at 15:38

DaniP

37,813
8
65
74

score 0 · Answer 3 · edited May 23 '17 at 11:50

0

A possible duplicate of this... How can I make a menubar fixed on the top while scrolling

What happens is the body tag is loaded at the top of the page by default, so all you need to do is put

body {margin-top:50px;} /* Same height as the menu bar */

it goes into more detail on the attached question link.

edited May 23 '17 at 11:50

Community

1
1

answered Oct 22 '13 at 15:38

Matt Maclennan

1,266
13
40

no, this won't solve the problem because headings will be always covered. Maybe could be useful for the first heading only – Fabrizio Calderan Oct 22 '13 at 15:42

Offsetting link within same page

3 Answers3