Navbar fixed body padding

Add body top and bottom padding by adding class.

3.5rem

Element

3.5rem

<!-- Source -->
<div class="py-navbar"></div>

<div class="py-navbar-1"></div>
<div class="pt-navbar-1"></div>
<div class="pb-navbar-1"></div>

<div class="py-navbar-2"></div>
<div class="pt-navbar-2"></div>
<div class="pb-navbar-2"></div>

<div class="py-navbar-3"></div>
<div class="pt-navbar-3"></div>
<div class="pb-navbar-3"></div>

<div class="py-navbar-4"></div>
<div class="pt-navbar-4"></div>
<div class="pb-navbar-4"></div>

<div class="py-navbar-5"></div>
<div class="pt-navbar-5"></div>
<div class="pb-navbar-5"></div>

Responsive

<!-- Source -->
<div class="py-navbar-sm"></div>
<div class="pt-navbar-sm"></div>
<div class="pb-navbar-sm"></div>

<div class="py-navbar-sm-1"></div>
<div class="pt-navbar-sm-1"></div>
<div class="pb-navbar-sm-1"></div>

<div class="py-navbar-sm-2"></div>
<div class="pt-navbar-sm-2"></div>
<div class="pb-navbar-sm-2"></div>

<div class="py-navbar-sm-3"></div>
<div class="pt-navbar-sm-3"></div>
<div class="pb-navbar-sm-3"></div>

<div class="py-navbar-sm-4"></div>
<div class="pt-navbar-sm-4"></div>
<div class="pb-navbar-sm-4"></div>

<div class="py-navbar-sm-5"></div>
<div class="pt-navbar-sm-5"></div>
<div class="pb-navbar-sm-5"></div>


<div class="py-navbar-md"></div>
<div class="pt-navbar-md"></div>
<div class="pb-navbar-md"></div>

<div class="py-navbar-md-1"></div>
<div class="pt-navbar-md-1"></div>
<div class="pb-navbar-md-1"></div>

<div class="py-navbar-md-2"></div>
<div class="pt-navbar-md-2"></div>
<div class="pb-navbar-md-2"></div>

<div class="py-navbar-md-3"></div>
<div class="pt-navbar-md-3"></div>
<div class="pb-navbar-md-3"></div>

<div class="py-navbar-md-4"></div>
<div class="pt-navbar-md-4"></div>
<div class="pb-navbar-md-4"></div>

<div class="py-navbar-md-5"></div>
<div class="pt-navbar-md-5"></div>
<div class="pb-navbar-md-5"></div>


<div class="py-navbar-lg"></div>
<div class="pt-navbar-lg"></div>
<div class="pb-navbar-lg"></div>

<div class="py-navbar-lg-1"></div>
<div class="pt-navbar-lg-1"></div>
<div class="pb-navbar-lg-1"></div>

<div class="py-navbar-lg-2"></div>
<div class="pt-navbar-lg-2"></div>
<div class="pb-navbar-lg-2"></div>

<div class="py-navbar-lg-3"></div>
<div class="pt-navbar-lg-3"></div>
<div class="pb-navbar-lg-3"></div>

<div class="py-navbar-lg-4"></div>
<div class="pt-navbar-lg-4"></div>
<div class="pb-navbar-lg-4"></div>

<div class="py-navbar-lg-5"></div>
<div class="pt-navbar-lg-5"></div>
<div class="pb-navbar-lg-5"></div>


<div class="py-navbar-xl"></div>
<div class="pt-navbar-xl"></div>
<div class="pb-navbar-xl"></div>

<div class="py-navbar-xl-1"></div>
<div class="pt-navbar-xl-1"></div>
<div class="pb-navbar-xl-1"></div>

<div class="py-navbar-xl-2"></div>
<div class="pt-navbar-xl-2"></div>
<div class="pb-navbar-xl-2"></div>

<div class="py-navbar-xl-3"></div>
<div class="pt-navbar-xl-3"></div>
<div class="pb-navbar-xl-3"></div>

<div class="py-navbar-xl-4"></div>
<div class="pt-navbar-xl-4"></div>
<div class="pb-navbar-xl-4"></div>

<div class="py-navbar-xl-5"></div>
<div class="pt-navbar-xl-5"></div>
<div class="pb-navbar-xl-5"></div>