Sticky navbar does not stick

Wappler General Need Help
1

I have a sticky navbar, but it will not stick. Any ideas why not?

20190319sticky
20190319sticky.jpg1512Ă—477 206 KB

2

Well sticky navbar should not be placed in a container. It must placed before your content.

3

Ok, that was easy enough. So I have to settle for a screen wide navbar?

4

You can add a container wrapping your navbar content …

 <nav class="navbar navbar-expand-lg navbar-light sticky-top">
      <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse1" aria-controls="collapse1" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div id="collapse1" class="collapse navbar-collapse">
          <div class="navbar-nav">
            <a class="nav-item nav-link" href="#">Link</a>
            <a class="nav-item nav-link" href="#">Link</a>
          </div>
        </div>
      </div>
    </nav>
1 Like
5

Aha. Thanks. I had the container in the wrong position. I keep learning new things.

6

Strange, I have a sticky navbar inside a container and it works well !

Image1
Image1797Ă—80 23.7 KB

7

That is because probably you have content in the container, after the navbar. Then the container’s height is set to whatever the content height inside it is, so the navbar will be “sticky” until the end of container when scrolling.
In Jacques’s case, the only content inside the container was the navbar, so it will never be “sticky” as the container height is equal to navbar height, so there is nothing to be scrolled.

1 Like