How to make fullpage.js fit page with fixed navigation? - html

Question

My problem is that my fixed bootstrap navigation is covering 60px (the navigation's height) of my page, so it's screwing op the "padding" of the columns I have.
I tried to put margin: 60px on .section, but it just pushes the page 60px down, not resizing the page by 60px. Instead there is 60px hidden at the bottom.
There is no padding-top/bottom defined on the columns. They are defined with display: flex and align-items: center, with a div inside containing the text so it will be centered all time.
https://jsfiddle.net/fmcq9wpn/7/
CSS:
.col-lg-6 {
display: flex;
align-items: center;
.text {
padding: 0 5%;
h3 {
font-weight: bold;
padding-bottom: 10px;
}
p {
line-height: 2.0;
}
}
}
HTML:
<div class="section news">
<div class="row">
<div class="picture col-lg-6 col-md-6 col-12 col-sm-12">
</div>
<div class="col-lg-6 col-md-6 col-12 col-sm-12">
<div class="text">
<p>Mandag 27. Januar, 2019</p>
<H3>COACHING-FOREDRAGSRÆKKE PÅ UNIVERSITET</H3>
<p>Har man lyst til at vide mere om coaching fra forskellige, faglige perspektiver, arrangerer
professor
Reinhardt Stelter en foredragsrække på . . .</p>
<br> <button>Læs mere</button>
</div>
</div>
</div>
<div class="row">
<div class="news-box col-lg-6 col-md-6 col-12 col-sm-12">
<div class="text">
<p>Torsdag 5. Februar, 2019</p>
<h3>SIKKEN FEST!</h3>
<p>Tak til alle gæster, som kom og fejrede det nye års ankomst sammen med os! Det blev en
vidunderlig
fredag . . .</p><br>
<button>Læs mere</button>
</div>
</div>
<div class="picture col-lg-6 col-md-6 col-12 col-sm-12">
</div>
</div>
</div>
<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Cpenhagen Coaching Center</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
Menu <i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" data-proofer-ignore href="/#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-proofer-ignore href="/#education">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" data-proofer-ignore href="/#testimonial">Testimonial</a>
</li>
<li class="nav-item">
<a class="nav-link" data-proofer-ignore href="/#news">News</a>
</li>
<li class="nav-item">
<a class="nav-link" data-proofer-ignore href="/#signup">Sign up</a>
</li>
<li class="nav-item">
<a class="nav-link" data-proofer-ignore href="/#footer">Footer</a>
</li>
</ul>
</div>
</nav>
It's like the .section will always be the same size as the window.
I have a picture here: https://ibb.co/BgskKSb showing the layout.

Answer 1

Use the fullpage.js option paddingTop.
For example:
new fullpage('#fullpage', {
paddingTop: '60px'
});