<!DOCTYPE html>
<html lang="en">
<head>
<!-- Head section -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jessica Kowalski</title>
<!-- Font Awesome CDN for social icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Styling for navigation bar -->
<style>
.navbar {
position: sticky;
top: 0;
z-index: 1000;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Highlights</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>;
</body>
</html>While building my website using Bootstrap, I encountered an issue with the sticky navbar functionality. The navbar remains sticky at the top of the page when in the #header-section but disappears when scrolling past to other sections.
Below is a simplified version of the code I used:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<!-- Navbar content -->
</nav>
<!-- Header Section -->
<div class="container" id="header-section">
<!-- Content -->
</div>
<!-- Other sections -->
<section class="highlights-section">
<!-- Content -->
</section>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
#header-section {
height: 60vh;
/* Other styling */
}
.navbar {
position: sticky;
top: 0;
z-index: 1000;
}
Attempts made to resolve the issue:
Increased the
z-indexvalue for the navbar.Decreased the
z-indexvalue for other sections.