I have a bootstrap 5 page that uses vertical navs and tabs alongside.
The website works ok, except that, especially on larger screens, it moves up and down the viewport depending upon the amount of sata displayed in the tabs.
I am trying to ensure that the heading/nav remain at top of screen no matter how much data is displayed in the relevent tab.
The code I am using can be summarised below:
<body>
<div class="container-fluid" style="width: 90%">
<div class="row">
<h1 class="text-center text-white display-4">Header</h1>
<div class="col-md-3">
<nav class="nav flex-column nav-pills nav-pills-custom" id="navTab" role="tablist">
<a class="nav-link active"...data-bs-toggle="pill" href="first-tab" role="tab" ...">Link 1</a>
<a class="nav-link"...data-bs-toggle="pill" href="first-tab" role="tab" ...">Link 7</a>
</nav>
</div> <!-- col-md-3 -->
<div class="col-md-9">
<!-- Tabs content -->
<div class="tab-content" id="tabContent">
<!-- ******************** Tab1 ****************** -->
<div class="tab-pane fade shadow rounded bg-white p-5" id="first-tab" role="tabpanel">
<h4 class="font-italic mb-4">First Tab</h4>
<p class="font-italic text-muted mb-2">Short content.</p>
</div>
<!-- ******************** Tab7 ****************** -->
<div class="tab-pane fade shadow rounded bg-white p-5" id="last-tab" role="tabpanel">
<h4 class="font-italic mb-4">Last Tab</h4>
<p class="font-italic text-muted mb-2">Longer content.</p>
</div>
</div> <!-- tabContent -->
</div> <!-- col-md-9-->
</div> <!-- row -->
</div> <!-- container-fluid -->
</body>