2

The navbar sticks to the top until I scroll out of the hero-image then disappears. I'd like the navbar to be present throughout the whole page. Any ideas? 

<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">About Me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#projects">Projects</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact Me</a>
                </li>
            </ul>
        </div>
    </nav>
<!--Navbar end-->

<!-- Homescreen hero -->
    <div class="hero-image" id="home">
        <div class="hero-text">
            <h1 class="name">Text</h1>
            <h1>Text</h1>
        </div>
    </div>
doğukan
  • 23,073
  • 13
  • 57
  • 69
Kait Jardine
  • 93
  • 1
  • 2
  • 13
  • This was the problem in my case: https://stackoverflow.com/questions/49848196/css-position-sticky-not-working-when-height-is-defined – jannej Sep 12 '19 at 18:34

2 Answers2

5

Just remove any height declaration from the body tag in your css.

e.g. Remove things like this:

body { height 100 vh or %;}

Edit: Also make sure to give top:0 to your sticky navbar element

Deevoid
  • 91
  • 1
  • 6
4

You can try to use fixed-top instead of sticky-top.

I don't know which browser you're using, but the documentation states Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser.(https://getbootstrap.com/docs/4.2/components/navbar/#placement)

Tibbelit
  • 1,215
  • 10
  • 17