Navbar overlapping content in Bootstrap 4 - html

Question

My portfolio page has a sticky navbar, but when I click on the navbar links it overlaps the text in each section. In about, it overlaps the text. In "portfolio" and "about" it overlaps both tiles. I tried to compensate with some padding-top in each section to no avail.
Here is the complete navbar:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top" style="background-color: #fc7a57;">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto navfont" href="#">portfolio.</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about"><i class="fa fa-user-circle-o" aria-hidden="true"></i> about</a>
</li>
<li class="nav-item">
<a class="nav-link text" href="#portfolio"><i class="fa fa-picture-o" aria-hidden="true"></i> portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link text" href="#contact"><i class="fa fa-envelope-o" aria-hidden="true"></i> contact</a>
</li>
</ul>
</nav>
And here's the CSS code for one of the sections
#contact {
background-color: #466365;
width: 100%;
height: 100%;
padding-top:50px;
color: white;
}
https://codepen.io/pablovester/pen/ZKJxLL
Thank you guys

Answer 1

First thing wrong I see is you are using ID's to style elements, NO, use class.
You are using ID "portfolio" in more than 1 element while Id should be unique in document.
Anyway to fix your problem just add margin-top: 100px; will be enough
.portfolio {
background-color: #bcd39c;
width: 100%;
height: 100%;
padding-top:50px;
margin-top:100px;
}
and add a class in html
<div id="portfolio" class="portfolio">
and also in other needed IDS.
Hope it helps!
I'm working on this site and did exactly what you are trying to achieve, check it out

Answer 2

Take a look at this HTML source and check if help you. Don't forget to copy all links at CSS and Javascript Settings section.
https://codepen.io/danogliari/pen/gWQWqo
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Daniel Ogliari</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>

Answer 3

My solution to this same problem in Bootstrap 4 is...
.navbar-nav > .nav-item > a {
position: relative;
}