Bootstrap navbar behaviour on mobile - html

Question

I am building a Bootstrap 4 site using Jekyll. I have a jumbotron on each page which is working as a hero header. Everything works great until I resize to a mobile viewport. At this point the jumbotron gets tucked beneath the fixed header instead of occupying its own space beneath it. As shown in image.
When I unfix the header, the flow behaves normally. I have yet to make any style changes. So far all I am working with is Bootstrap HTMS and default stylings
How can I prevent this from happening whilst retaining a fixed header? I have posted both the body and nav HTML that I am using within Jekyll to build the pages.
Sincere thanks in advance for any pointers :)
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<!--Site logo-->
<a class="navbar-brand" href="#">Thomas Bishop</a>
<!--Collapse nav on mobile viewports-->
<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>
<!--Nav links-->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<!--Home-->
<li class="nav-item active">
<a class="nav-link" href="{{ site.baseurl }}/">Home <span class="sr-only">(current)</span></a>
</li>
<!--Services-->
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/services">Services</a>
</li>
<!--Expertise-->
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/expertise">Expertise</a>
</li>
<!--Blog-->
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/blog">Blog</a>
</li>
<!--About-->
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/about">About</a>
</li>
<!--Contact-->
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}/contact">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
---
layout: default
title: Content Usage Policy
permalink: /content-usage-policy
---
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="jumbotron jumbotron-fluid bg-light">
<h1 class="display-4 d-flex justify-content-center">Content Usage Policy</h1>
<p class="lead d-flex justify-content-center">Optional sub-heading or meta description</p>
</div>
</div>
</div>
</div>

Answer 1

As you are using class jumbotron it's providing padding-top: 4rem in large devices and padding-top: 2rem in small devices that's why your content overlap with the header in the small devices.
FYI as position: fixed is applied on the nav, for the other elements on the page nav does not exist so your next div will also start from top: 0. Inspect the element and view <div class="container-fluid"> you can see it also started from top:0. To fix this issue do the following:
body > .container-fluid {
padding-top: 40px;
}
By applying this css, gap between nav and content will increase and if you don't want this extra gap than instead of applying above css rule just apply this for small devices.
#media (max-width: 576px) {
body > .container-fluid {
padding-top: 20px;
}
}
And place this css such that it will load after the bootstrap's main css.

Answer 2

Simply apply a margin-top or padding-top equivalent to your fixed header height to your jumbotron using a mobile media query. Here is a link to a pen detailing a fixed header behavior.