How not to hide element under fixed-top header with dynamic height before start scrolling

https://stackoverflow.com/questions/57408641/how-not-to-hide-element-under-fixed-top-header-with-dynamic-height-before-start

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
    <header>
        <!--Fixed navbar-->
        <nav class="custom-navbar fixed-top navbar-light bg-light">
        <div>
        whateverlalallalaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </div><div>
        whateverlalallalabbbbb bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb bbbbbb
        </div><div>
        whateverlalallala
        </div><div>
        whateverlalallala
        </div>
        </nav>
    </header>
    <main role="main">
        <div class="container-fluid">
            <table class="table table-striped table-bordered dataTable" cellspacing="0" width="100%" role="grid"></table>
            <p style="background:red">1</p>
            <p style="background:blue">2</p>
            <p style="background:orange">3</p>
            <p style="background:green">4</p>
        </div>
    </main>
</body>

CSS

.custom-navbar {
  padding: 0.5rem 1rem;
}
body > main {
  padding-top: 112px;
}