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:
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;
}