How to scroll without overlapping the navbar

Wappler General Need Help
1

Hello All,

How to fix the navbar at the top of the page so that, when the content page is scrolled, the navbar should not overlap the page but should stay fix?

Below is my navbar code which is the default created by wappler.

<nav class="navbar navbar-expand-lg navbar-light ms-3 me-3 ps-2 pe-2 sticky-top">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse1" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbar1_collapse1">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#">Home</a>
        <a class="nav-item nav-link" href="#">AboutUs</a>
        <a class="nav-item nav-link" href="/register" internal="true">Register</a>
        <a class="nav-item nav-link" href="/login" internal="true">Login</a>
      </div>
    </div>


  </nav>
2

Check if this helps:

An example I found:
https://getbootstrap.com/docs/5.0/examples/navbar-fixed/

Is that what you wanted?

1 Like
3

Thanks @Apple
The document you shared helped in getting the desired result.