How to assemble a floating navbar layout in Bootstrap?

Question

I was trying to make a layout with floating menu, as in the link below:

https://demo.tagdiv.com/newspaper_nomad/

But whenever you try to set the absolute positioning on the navbar, to make it float over the content, the Nav layout defaults.

<nav class="navbar navbar-expand-lg navbar-light bg-light container" style=" max-width:1400px;position:absolute;top:25px">
  <a class="navbar-brand" href="#">LOGO</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
       <li class="nav-item">
         <a class="nav-link">Home</a>
       </li>
       <li class="nav-item">
             <a class="nav-link">Home</a>
       </li>
    </ul>
  </div>
</nav>
<div class="conteudo">
       .conteudo_do_site
</div>

It works by making the content of the page fluctuate with the lower z-index, but this ends up generating many bugs in the other sections of the site, so it would be more interesting that only the Nav fluctuate

How to do this with boostrap?

Answer 1

Bootstrap has a class for making the bar, . Fixed-top you use this class next to the class . navbar

Then it would look like this in your case:

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light container" style=" max-width:1400px;position:absolute;top:25px">

It’s not good practice to use inline css like this. And I don’t know if it’s good to use the class. container in navbar, since the navbar itself already a type of container.

But I could be wrong.

I hope I’ve helped.