By registering with us, you'll be able to discuss, share and private message with other members of our community.
SignUp Now!Solved- thanks! I managed to figure it out!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Navbar Example</title>
<!-- Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.top-section {
height: 150px;
background-color: #f4f4f4;
padding: 20px;
text-align: center;
}
.navbar {
position: sticky;
top: 0;
z-index: 1000;
}
.content {
padding: 50px;
height: 2000px; /* For scrolling effect */
}
</style>
</head>
<body>
<div class="top-section">
<h1>Welcome to the Top Section</h1>
<p>This section scrolls out of view as you scroll down.</p>
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="content">
<h2>Scroll Down to See the Sticky Navbar</h2>
<p>This content area is here to demonstrate the scrolling effect.</p>
<p>Keep scrolling to see how the navbar sticks to the top of the page.</p>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Yes, except for the colour, but how would I change this in the relevant Bootstrap stylesheet?is this what you was after 🙂
Code:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sticky Navbar Example</title> <!-- Bootstrap CDN --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <style> body { margin: 0; font-family: Arial, sans-serif; } .top-section { height: 150px; background-color: #f4f4f4; padding: 20px; text-align: center; } .navbar { position: sticky; top: 0; z-index: 1000; } .content { padding: 50px; height: 2000px; /* For scrolling effect */ } </style> </head> <body> <div class="top-section"> <h1>Welcome to the Top Section</h1> <p>This section scrolls out of view as you scroll down.</p> </div> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Sticky Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <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="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> </ul> </div> </div> </nav> <div class="content"> <h2>Scroll Down to See the Sticky Navbar</h2> <p>This content area is here to demonstrate the scrolling effect.</p> <p>Keep scrolling to see how the navbar sticks to the top of the page.</p> </div> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
I've kind of found a semi-solution except ideally I would like to move the nav bar forward. I've tried doing this with the z-index on css to no avail, and wonder if you may have a solution. Pics below to show what I haveI don't use bootstrap. And won't, if I can help it, but that's neither here nor there. If the sample code from @simong1993 works, then it appears you can add the necessary CSS for what you need in addition to BS. No?
So would I wrap it in a larger div for this and define the div's height and width as so:The container that you wish to have become stuck to the top of the viewport must be the container that gets position:sticky;. It looks to me like you have position:sticky; on the elements above your navbar. You would need something along these lines:
[wrapper]
[topper]
[navigation position:sticky;]
[content]
[/wrapper]
The element with position:sticky; must be in a wrapper with enough height to allow it to become 'stuck'.
.wrapperdiv {
width: 100%
height: 20%
}
.wrapperdiv .navbar {
height: 10%
}
So would I wrap it in a larger div for this and define the div's height and width as so:
CSS:.wrapperdiv { width: 100% height: 20% } .wrapperdiv .navbar { height: 10% }
OK, I've tried working with this quite a bit, and i'm not sure how to make it so that there is little space on top below the navigation bar but still the sticky nav stays at the top all the way down. At the moment, it's disappearing as soon as the body text comes to the top of the screen. Do you know a fix to this?Here is a quick sample:
body was given a large height to simulate a lot of content and to allow scrolling.
Here's the live link: www.house-of-lord.co.uk/ArtIt would be easier with a link to inspect, but it sounds like the nav is not a child of the wrapper. Note the structure of my sample. The stuck element needs to be a child of the scroll-able wrapper. Scroll-able because of the amount of content.
Edit:
The stuck element has to be a child of a container that has enough content to scroll.
<main> is outside of the wrapper. Currently, nav will only stay stuck as long as wrapper is in the viewport. Since all the page content is outside of wrapper, it scrolls away.Here's the live link: www.house-of-lord.co.uk/Art
I can't seem to get it to work in the way you have it. It's either too much of a distance between div class title-text1 or doesn't scroll beyond the text. I'll ask my coding tutor if he has any ideas for tomorrow. Thanks for your help though!<main> is outside of the wrapper. Currently, nav will only stay stuck as long as wrapper is in the viewport. Since all the page content is outside of wrapper, it scrolls away.
View attachment 2814
Also, youdon't needshouldn't have a height on the wrapper other than maybe 100vh (so you can force a footer to always be at the bottom of the viewport).
Solved- thanks! I managed to figure it out!
Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.
We use essential cookies to make this site work, and optional cookies to enhance your experience.