Estou tentando fixar uma div com um título, abaixo de uma navbar fixa no topo da tela. Segue abaixo a minha tentativa e exemplo que não funciona:
<body>
<header class="sticky-top">
<nav class="navbar navbar-expand-md navbar-dark menu-superior">
<!-- Menu -->
MENU
</nav>
</header>
<!-- CORPO-->
<main class="container-fluid p-0 pr-sm-3 pl-sm-3">
<!-- TITULO QUE QUERO FIXAR -->
<div class="sticky-top tilte text-center font-weight-bold">
<h5>Título</h5>
</div>
<!-- CONTEÚDO ... -->
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</main>
</body>
Alguém sabe como fazer? Se executar o exemplo acima com o Bootstrap 4, vai ver que quando eu uso o scroll da tela para baixo, a div do título sobrepõe à navbar que está acima dela. E o meu resultado esperado é que os dois fiquem fixos.
Segue o exemplo rodando: https://jsfiddle.net/ataufo/6emxzL9y/3/