Spacing around element when linking to anchor tag on page

Question

probably a silly question for most but can't seem to get it to work right. I'm trying to jump to an anchor on the page. This is working fine as shown in the fiddle I provided. I created a simple as possible sample of what I'm trying to accomplish.

When I click on the link, it should jump to the anchor on the page, but i can't seem to figure out how to add spacing on top of the anchor. When clicking the anchor it jumps to the anchor on the page ,but the anchor is at the top of the browser. I want space before the anchor because I have a stick Navigation bar on top. I've tried both padding top, margin top, everything and can't figure it out. Heres an image to explain what Im trying to do.

When clicking on the anchor, it jumps to the anchor on the page but defaults to being at the top of the browser.

What i want is for there to be spacing when i click the anchor tag.

https://jsfiddle.net/yao25Lxc/3/

I've tried

margin-top:

and

padding-top:

Hope i explained it well enough. The reason i need the spacing is because I have a fixed top bar and it covers the heading that i am linking to on the page so I need space to make up for that, nothing seems to work.

Title text that I linked to is underneath the top bar

I need spacing when i click on the anchor so my top bar doesnt cover the text.

Answer 1

Create a css for #anchor and apply your padding-top there. For example:

#anchor{ padding-top: 30px }

https://jsfiddle.net/bonez0607/59eqnqyp/

Answer 2

Target h3 element and add line height to it. Maybe not the most elegant solution, but it works.

HTML:

<nav>
<ul>
<li class=""><a href="#anchor">Test</a></li>
</ul>
</nav>
<div class="spacecontainer">

</div>

<h3 id="anchor">
<a id="">TEXT</a>
</h3>
<div class="spacecontainer">

</div>
<div class="spacecontainer">
</div>

CSS:

    .spacecontainer {
  width:100%;
  height:500px;
}

h3 {
 line-height:50px;
}

https://jsfiddle.net/8awx6hy4/