Bootstrap sticky-navbar blocks content when using page anchors

#1

I’ve been looking for possible solutions to this, I have a single page static site with a stick-top navbar and i’m using page anchors with id’s to jump to different sections. It’s actually jumping to the correct sections but the navbar is blocking the content it jumps to.

I read in another post that I should add a padding-top to the body, but that just creates whitespace to top of the navbar.

I also tried this:

const shiftWindow = () => { scrollBy(0, -50) };
window.addEventListener("hashchange", shiftWindow);
function load() { if (window.location.hash) shiftWindow(); }

Which works on load, but if scroll around the site a few times and I try jumping to a different section, it once again blocks the page. Does anyone know what options I have?

Example of blocked content:

image

Here’s the HTML code for the navbar:

<nav class="navbar sticky-top navbar-expand-lg navbar-light">
  <a class="navbar-brand" href="#">
    <img src="img/Rocalytics-logo.jpg" width="150" height="40" alt="">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#value-proposition">Value Proposition
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
          Solutions
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#scheduling-meetings">Scheduling</a>
          <a class="dropdown-item" href="#managing-meetings">Managing a Meeting</a>
          <!-- <a class="dropdown-item" href="#">Analytics</a> -->
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#user-experience">User Experience</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="mailto:customerservice@rocalytics.com">Contact Us</a>
      </li>
    </ul>
    <button class="btn btn-light my-2 my-sm-0 btn-sign-custom" type="submit">Sign In</button>
  </div>
</nav>

The CSS for the navbar is mostly “decorative” (i.e. coloring, hover color, etc)

And A Section has the follwing HTML:

  <section id="value-proposition">
    <div class="container text-center">
      <h1 class="value-proposition-header">Value Proposition</h1>
      <div class="row">
        <div class="col-md-4">
          <p>ROCalytics is a disruptive solution that requires a complete re-evaluation of enterprise tools and processes resulting
            in substantial cost savings and productivity gains.</p>
        </div>
        <div class="col-md-4">
          <p> Its scheduling, analytics, and reporting engine, is a key driver of value to customers.
          </p>
        </div>
        <div class="col-md-4">
          <p>
            In a simplistic way, ROCalytics is for meetings like Outlook is for emails.
          </p>
        </div>
      </div>
    </div>
  </section>

With the following CSS:

#value-proposition {
  padding: 40px;
  background-color: #1f80a9;
  color: white;
}

.value-proposition-header {
  margin-bottom: 35px;
}
#2

The only solution that I’ve found so far (I am Noob) is to add 70px margin to the top of every place the links in the navbar lead to. I think it’s an inelegant solution, as it seems that something should be able to connect to the place where the problems is, the navbar. I tried adding bottom margin, but it didn’t to anything. I’m guessing that the navbar class? function? overrides it? I’ll try to remember to post again if I find something that feels more like proper code instead of feeling like an oops-fix.

#3