0

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/

2
  • Qual seria o problema?
    – Sam
    Commented 27/03/2019 às 17:16
  • Editei e expliquei o que ocorre. Também botei um link com o exemplo rodando. Commented 27/03/2019 às 17:28

1 Resposta 1

2

Coloque o conteúdo numa nova div e aplique as classes do BS4:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- NAVBAR FIXA-->
 <header class="sticky-top">
     <nav class="navbar navbar-expand-md navbar-dark menu-superior">
         menu
     </nav>
 </header>    
 <!-- CORPO-->
 <main class="container-fluid p-0 pr-sm-3 pl-sm-3">
     <!-- TITULO QUE QUERO FIXAR -->
     <div class="tilte text-center font-weight-bold position-fixed w-100">
         <h5>Título</h5>
     </div>

      <div class="pt-4">
        conteudo
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      </div>
 </main>

A classe position-fixed irá fixar a div e a w-100 ajustar a largura para 100% do contêiner. A classe pt-4 irá aplicar um padding-top suficiente para dar um espaçamento do topo, para o conteúdo não fica por baixo do título.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .