0

I have header html element which is positioned fixed at top: 0 and set height:120px;

I have added margin-top: 120px to teaser.

I have menu with link to items in the same page. I have a problem in getting those link location to be in the exact view when user clicks on the link.

Half of the link location is hidden under the header and another half is visible to the user which does not look at all.

the structure of the document looks like this; 

<header>
  <div class="logoContainer">
  </div>
  <div class="navMenu">
    <a href="#featureList">Features</a>
    <a href="#team">Features</a>
  </div>
</header>
<div class="teaser" id="teaserID">
</div>
<div class="features" id="featureList">
</div>
<div id="team">
</div>
Caleb Anthony
  • 1,105
  • 9
  • 19
forethought
  • 2,913
  • 2
  • 16
  • 26
  • Can we get you to post your CSS? And maybe a screenshot of the issue? – joh04667 Sep 12 '16 at 20:40
  • 2
    Have you tried offsetting the header height by adding `margin-top: 120px` to your menu element? – UncaughtTypeError Sep 12 '16 at 20:40
  • Just for demo purpose, I have used link. Anyways, I have changed it. – forethought Sep 12 '16 at 20:42
  • @joh04667 added codepen url – forethought Sep 12 '16 at 20:49
  • Please note that [this answer](http://stackoverflow.com/a/9618795/854246) may be working in FF now. I tried it out and it seems to perform similarly to chrome and other browsers. Also, [using `:target`](http://stackoverflow.com/a/28824157/854246) is pretty neat and [fairly well supported now](http://caniuse.com/#search=%3Atarget). – Joseph Marikle Sep 12 '16 at 21:10

0 Answers0