Question: JSfiddle should explain it: 
<http://jsfiddle.net/UMW26/>

or 

Like the title says, how do I prevent fixed navigation bar from covering texts/titles after clicking a link or a visit via url address that will jump you to it.

here's a sample code I used:

```
<!DOCTYPE html>

<style type="text/css">
body { margin: 0; }
#content { height: 1500px;margin-top: 20px;background-color:skyblue; }
#fix-nav-bar { position: fixed; width:100%; top:0; text-align:center; background-color: pink; }

#content-title { margin-top: 250px;font-weight:bold;font-size:16pt; }
</style>

<div id="fix-nav-bar">
fixed navigation bar
</div>

<div id="content">
<a href="#content-title">Click here to jump to Title:</a>

<div id="content-title">Sample Content Title/Name</div>
How do I prevent fixed navigation bar from covering title after clicking "<b>Click here to jump to Title</b>" but just keep it slightly above it?
</div>

```

Answer: 
I fixed this with some jquery by:

1. Grabbing URL & checking if it has an ID at the end `#divID` & set it to a variable  
 `var id = '#divID'`

If the ID exists...

2. Get the height of the nav bar (or just go with what your heart says, 50px is used below)
3. Set the scrollTop property from your div's id.

```js
$('html,body').animate({
  scrollTop: $(id).offset().top - 50
});
```
JS solution: Use divs instead of links in the nav bar. Attach an onclick function that scrolls to your element's y-coordinate, minus the height of the nav bar.

Example:

HTML

```
<div class="nav-links">
    <div class="link" onclick="goTo('#about')">About</div>
    <div class="link" onclick="goTo('#tours')">Tours</div>
    <div class="link" onclick="goTo('#contact')">Contact</div>
</div>

```

JS:

```
function goTo(id) {
  let destination = document.querySelector(id);
  let yCoord = destination.offsetTop - 70;
  window.scrollTo({
    top: yCoord,
    behavior: "smooth"
  });
}

```