Fixed navbar - don't scroll page behind, and make it scrollable - css

Question

I have a couple of issues with Bootstrap 4 fixed-top navbar:
1) It scrolls the page behind it when in collapsed view - How to prevent that?
2) You can't scroll the navbar down if the links are out of the view, as you can see in the example below, I have 8 links, and added 35px paddings just to make them go out of the view. You cannot scroll down to them. Instead it scrolls the page behind it.
.navbar-nav > li > a {
padding:35px!important;
}
p {
padding-top:1000px; /* to emulate scroll */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand mx-auto" href="#">
<img src="https://loremflickr.com/320/240" width="35" height="35" alt="logo">
<span>Logo</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 1</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 2</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 3</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 4</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 5</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 6</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 7</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 8</a>
</li>
</ul>
</div>
</div>
</nav>
<p class="text-center"><strong>I am content at the bottom</strong></p>

Answer 1

This issue you can solve it by 2 ways
you can define a height for the .navbar class for example it can be 80px and then the content behind it give it padding-top: 80px or margin-top: 80px with the same value or even more to have some more space
UPDATE
just add breakpoint #media screen and (max-width: 991px) { .navbar { height: auto } }
body { height: 2000px; }
.navbar {
height: 80px;
}
#media screen and (max-width: 991px) { .navbar { height: auto } }
p {
padding-top:85px; /* to emulate scroll */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand mx-auto" href="#">
<img src="https://loremflickr.com/320/240" width="35" height="35" alt="logo">
<span>Logo</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-right" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 1</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 2</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 3</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 4</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 5</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 6</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 7</a>
</li>
<li class="nav-item main-nav">
<a class="nav-link py-0 text-center" href="#">Link 8</a>
</li>
</ul>
</div>
</div>
</nav>
<p class="spacing text-center"><strong>I am content at the bottom</strong></p>
this is more dynamic way if you don't want to have a fixed height and you can define it with js like that you just get the height of the header and then give it as padding-top to the content you want
var navH = $('.navbar').outerHeight();
console.log(navH);
var res = $('.spacing').css('padding-top', navH + 10); /* 10 in case you want more space*/
console.log(res);