Bootstrap sticky navbar but not over top content - html

Question

Hello I'm using kind of standard bootstrap code from tutorials and such trying to get my head around bootstrap. However I've searched everywhere and I can't find code that actually solves my problem.
<header>
<!-- Toggler/collapsible Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark navbar-default fixed-top">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<section id="home" class="carousel slide" data-ride="carousel">
<div id="container">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#home" data-slide-to="0" class="active"></li>
<li data-target="#home" data-slide-to="1"></li>
<li data-target="#home" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#home" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#home" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
This is a navbar with a standard carousel under.
The problem is I want a sticky navbar that always stays on top.
But as it is now it overlaps the carousel so I would like it to start below the navbar. I've tried adding padding-top and such with no lucky Ive also tried the codes that handle smaller resolution and ended up with big white spaces in between no matter how much padding I added. My navbar seems to be 56px in height.
I'm guessing this is easy if you have soem basic knowledge about Bootstrap.
There is also other questions I mark these with number if you are able to help.
Home link doesnt go all the way to the top. Is there anyway to fix this.
How do you handle so that multiple pages doesnt show up on one page. Is there a way to make f.ex have a min-height of display height?

Answer 1

add this to your css or download bootstrap.min.css from https://bootswatch.com/
1. for sticky navbar
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
2.
<header id="top">
<a class="nav-link" href="#top">Home</a>

Answer 2

#navbar {
overflow: hidden;
background-color: #333;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
.sticky + .content {
padding-top: 60px;
}

Answer 3

add new class in section for identification not-navbar
<section id="home" class="carousel slide not-navbar" data-ride="carousel"> </section>
add CSS for not-navbar class, default height Bootstrap navbar is 50px (without padding) and 70px (with padding). translateY(56px) because your navbar height is 56px.
.not-navbar {
transform: translateY(56px);
}
So, your content will be exactly below navbar, without overlap with your top content.