Fix div below Navbar - Bootstrap 4

Asked

Viewed 819 times

0

I’m trying to fix a div with a title, below a fixed navbar at the top of the screen. Below is my attempt and example that does not work:

<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>

Does anyone know how to do it? If you run the above example with Bootstrap 4, you’ll see that when I scroll down, the title div overrides the navbar above it. And my expected result is that they both stay fixed.

Follow the example running: https://jsfiddle.net/ataufo/6emxzL9y/3/

html css bootstrap-4

  • What would be the problem?

  • I edited and explained what happens. I also put a link with the example running.

1 answer

2


Place content in a new div and apply BS4 classes:

<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>

The class position-fixed will fix the div and the w-100 adjust width to 100% of container. Class pt-4 will apply a padding-top enough to give a top spacing, for the content does not stay under the title.

Browser other questions tagged html css bootstrap-4

You are not signed in. Login or sign up in order to post.