I swear I have tried everything that I can think of to solve this issue. I have a fixed bootstrap navbar, using a javascript onscroll event listener to apply the fixed attribute...I tried using style in the markup, but it did not have the desired effect. So of course this is a repetitive issue, but I have tried all the recommendations and then some. At least all that I could find. The problem is that when I use any #about internal link, the content falls beneath the navbar. I have tried margins, absolute, relative, top -...px on .section2. None of it worked. 

And please I am new to this, so any solutions, please make it specific to my code and not just add a position to the anchor. Give me the exact class/id and what to add, or remove, or both.
here is a link to the live page to see what happens when you click any link for #about section: [portfolio #about](https://kingdomb.github.io/live_portfolio/#about)

<https://kingdomb.github.io/live_portfolio/#about>

NOTE: The code below does not give display the error properly so use the link above.

UPDATE: 3/22 02:16
I managed to find this:

```
Come on guys!

```

This have a very simple solution, create your ancho like this:

```
<div style="margin: -50px 0px 50px 0px; position: absolute;">
<a id="myanchor"></a>
</div>

```

With -50px margin what i make is upper the anchor div, and with 50px margin, i push down the next content. You only have to make your test with your custom margins.

Works like a charm. I use this trick in all one page design websites.

BUT, now one click on the about link in the navbar to #myanchor gives me this:[![correct position](https://i.stack.imgur.com/8SZrM.png)](https://i.stack.imgur.com/8SZrM.png)

And if I click the exact same navbar link I get a minor adjustment to this:[![incorrect position](https://i.stack.imgur.com/cJeJL.png)](https://i.stack.imgur.com/cJeJL.png)

THANKS!!!

```js
// When the user scrolls the page, execute myFunction
window.onscroll = function() {
  myFunction();
  myFunction2();
};

// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll 
position.Remove "sticky"
when you leave the scroll position

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky");
  } else {
    navbar.classList.remove("sticky");
  }
}

// Get the logo
var logo = document.getElementById("logo");

// Get the offset position of the logo
var logoSpin = logo.offsetTop;

// Add the logo-spin class to the navbar when you reach its scroll 
position.Remove "logo-spin"
when you leave the scroll position

function myFunction2() {
  if (window.pageYOffset >= logoSpin) {
    logo.classList.add("logo-spin");
  } else {
    logo.classList.remove("logo-spin");
  }
}

// All links will have a target:__blank for external page linking
// Read more: https://html.com/attributes/a-target/#ixzz6GMsDfQEr
// jQuery(document.links)
//   .filter(function() {
//     return this.hostname != window.location.hostname;
//   })
//   .attr("target", "_blank");

//OR Read more: https://html.com/attributes/a-target/#ixzz6GN6pd1Qt
function externalLinks() {
  for (var c = document.getElementsByTagName("a"), a = 0; a <
    c.length; a++) {
    var b = c[a];
    b.getAttribute("href") &&
      b.hostname !== location.hostname &&
      (b.target = "_blank");
  }
}
externalLinks();
```

```css
html,
body {
  background-color: #E3E3E3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* HOME */

.section1 {
  background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: cover;
  background-attachment: scroll;
  width: 100%;
  height: 100%;
}

.section1 .container {
  background-color: rgb(0, 0, 0, 0.65);
  min-height: -webkit-fill-available;
  min-width: -webkit-fill-available;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.home-btn {
  background-color: transparent;
  font-weight: 500;
  border-color: #8e0000;
  border-radius: 3px;
  color: #8e0000;
  margin-top: 35px;
  font-size: 1.12em;
  transform: translate(-50%, -50%);
  position: absolute;
  text-shadow: .1px .8px 1px black;
  -webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}

/* hover styling required !important */

.home-btn:hover {
  color: #8e0000 !important;
  border-color: #8e0000;
  font-size: 1.4em;
  border-width: 3px;
  font-weight: 600;
  text-shadow: .1px 2px 1px black;
  -webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}

.intro {
  color: white;
  font-size: 2.74em;
  text-shadow: .1px .8px 1px black;
}

.highlight {
  color: #8e0000;
  text-shadow: .1px .8px 1px black;
}

/* NAVIGATION */

.logo {
  display: inline-flex;
  flex-direction: row;
  -webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}

.navbar-brand {
  margin: 0px;
  padding: 0px 0px !important;
}

.logo-wrapper {
  color: white;
  font-size: 1.4em;
  font-family: 'Raleway', sans-serif;
  text-shadow: .1px 2px 1px black;
}

.logo-spin {
  -webkit-animation: spin 1s;
  animation: spin 3s;
  animation-iteration-count: 1;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateY(360deg);
  }
  100% {
    -webkit-transform: rotateY(-360deg);
  }
}

@keyframes spin {
  from {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}

.navbar {
  background-color: #333;
  height: 65px;
  border-bottom: 6px solid #212529;
  border-top: 6px solid #212529;
}

#navbar {
  z-index: 9999;
}

.navbar-text {
  vertical-align: middle;
  margin-left: 200px;
  height: inherit;
}

@media only screen and (max-width: 860px) {
  .navbar-text {
    display: inline-block;
    align-items: center;
    margin-left: 30px;
  }
}

#navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 0px 30px;
  text-decoration: none;
  font-size: 1.2em;
  font-family: 'Raleway', sans-serif;
  text-shadow: .1px 1px 1px black;
}

/* ABOUT */

#about {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
  text-shadow: .1px .8px 1px black;
  position: relative;
  height: -65px;
  margin-top: 200px;
}

/* .section2 {
  position: absolute;
  width: 100%;

} */

.section2 .row {
  background: url("../images/improved-teamwork-and- 
 collaboration_1887x741.jpg") center center no-repeat;
 height: 100%;
  width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  border-radius: 0%;
}

.section2 .card {
  background-color: RGBA(33, 37, 41, .80);
  color: white;
  min-height: -webkit-fill-available;
  height: 100%;
}

.section2 .card-block {
  font-weight: 520;
  width: 50%;
  margin: 0 auto;
  font-size: 25px;
  line-height: 50px;
  padding: 60px;
}

.section2 a {
  color: #9b0000;
  -webkit-filter: drop-shadow(.1px .8px 2px rgba(0, 0, 0, .8));
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}

.section2 .card-block {
  z-index: 8000;
  padding-right: 200px;
  padding-left: 0px;
  margin-left: 100px;
}

.section2 a:hover,
.section2 #skills:hover,
.section2 #projects:hover {
  text-decoration: underline;
}

.section2 .btn {
  border-color: #8e0000;
  border-radius: 13px;
  border-width: 3px;
  font-weight: 500;
  font-size: 0.8em;
  transition: color 0.15s ease-in-out, background-color 0.15s ease- in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in- out;
}

.section2 .btn:hover {
  background-color: #8e0000;
  color: #212529;
  text-decoration: none;
}

#about {
  margin-bottom: 75px;
}
```

```html
<!doctype html>
<html lang="en">

<head>

</head>

<body>

  <!-- HOME -->
  <section id="home" class="section1">
    <div class='container'>
      <div class="row justify-content-center">
        <div class="col-md-12 col-sm-12">
          <p class='intro'>
            Hello, my name is <span class="highlight animated fadeIn" style="animation-delay:             1s; animation-duration: 
1.8s">King</span>.
            <br>
            <div class="intro animated fadeInLeft" style="animation- 
delay: 3s; animation-                 duration: 2s">And I'm a full- stack web developer.</div>
            <a href="#myanchor"><button type="button" class="home-btn 
btn btn-primary-outline                btn-xs animated fadeIn"
             style="animation-delay: 5s; animation-duration: 
2s">VIEW MY WORK</button></a>
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- NAVIGATION -->
  <div id="navbar">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <div class="container">
        <div class="logo-wrapper nav-item active">
          <div class="logo" id="logo">
            <a class="navbar-brand" href="#home"><img src="favicon.ico" alt="King's Brand                 Logo"></a>
          </div>
          <span class="brand" id="brand" style="animation-delay: 0s; 
animation-duration:                 3s">KING MAJOR</span>
        </div>
        <button class="navbar-toggler" type="button" data- toggle="collapse" data- target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#myanchor">ABOUT
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#skills">SKILLS
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#projects">PROJECTS
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">CONTACT
                <span class="sr-only">(current)</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

  </div>

  <!-- ABOUT -->
  <div class="blank" style="margin: -65px 0px 200px 0px; position: 
absolute;">
    <a id="myanchor"></a>
  </div>
  <section id="about" class="section2">
    <div class="row-fluid">
      <div class="row">
        <div class="card ">
          <div class="card-block">
            <div class="card-title">
              <h1>Welcome, <a href="#">let's talk!</a></h1>
            </div>
            <div id="container">
              <p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
                <a href="#skills">skills</a>, and some of my recent
                <a href="#projects">projects</a>. THANKS!
              </p>
              <a href="General_Resume.pdf" class="btn btn-outline- 
    primary" target="__blank">Print My Resume
            </a>

            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

</body>

</html>
```