Currently, I am in the process of constructing a Bootstrap 4 website using Jekyll. Each page features a jumbotron that serves as a hero header and everything is functioning smoothly.However, when I resize the viewport to a mobile size, the jumbotron ends up positioned below the fixed header rather than having its own separate space underneath. This issue can be seen in the image provided.
Upon removing the fixed attribute from the header, the layout returns to normal functionality. No alterations have been made to the styling at this point, with only default Bootstrap HTML and styles being used.
Is there a way to prevent this behavior while still keeping the header fixed? Below, you will find the HTML for both the body and navigation sections that are utilized in Jekyll to construct the pages.
Your help on this matter would be greatly appreciated!
<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>