14

I want my navigation bar to be sticky, but it's not working. I'm also using some basic jQuery to toggle slidedown for class "dropmenu". I also tried position sticky for <a> element and still it wouldn't work. This is HTML and CSS :

.dropmenu {
  display: block;
  height: 65px;
  width: 100%;
  background: url("images/menuicon.png") no-repeat 98% center;
  background-color: #404040;
  cursor: pointer;
}

nav ul {
  padding: 0;
  overflow: hidden;
  background: #505050;
  display: none;
}

nav ul li {
  display: block;
  float: none;
  text-align: left;
  width: 100%;
  margin: 0;
}

nav ul li a {
  color: white;
  padding: 10px;
  border-bottom: 1px solid #404040;
  display: block;
  margin: 0;
}

div.sticky {
  position: sticky;
  top: 0;
}
    <div class="center">
        <header>
            <img class="headerImage" src="images/header.png"/>
            <hr class="menu">
            <div class="sticky">
                <a class="dropmenu"></a>
                <nav class="desktop">
                    <ul>
                        <li><a href="index.php">Sertet</a></li>
                        <li><a href="index.php">Rtretrti</a></li>
                        <li><a href="photos.php">ertettterli</a></li>
                        <li><a href="index.php">retemi</a></li>
                        <li><a href="index.php">Kerterti</a></li>
                    </ul>
                </nav>
            </div>
            </header>
        <hr class="menu">
   <p>content goes here</p>
</div>

So what would be the problem?

Toms Eglite
  • 349
  • 1
  • 4
  • 13

5 Answers5

31

When you place a position:sticky element inside another element things can get tricky. The sticky element will only travel the height of the parent element so you need to have space in your parent element for the sticky element to move because position: sticky is scoped to the parent element and not the page. The parents overflow and display property can also have an effect. You can try to set the display property of your parent elements to display: intital.

try adding the following:

.center, header{
  display:initial;
}

You can probably set it to inline or inline-block as well depending on your needs.

Here is your snippet with that added along with a couple of other things just for display purposes:

body{
  height:200vh;
}

.center, header{
  display:initial;
}

.dropmenu {
  display: block;
  height: 65px;
  width: 100%;
  background: url("images/menuicon.png") no-repeat 98% center;
  background-color: #404040;
  cursor: pointer;
}

nav ul {
  padding: 0;
  overflow: hidden;
  background: #505050;
  display: none;
}

nav ul li {
  display: block;
  float: none;
  text-align: left;
  width: 100%;
  margin: 0;
}

nav ul li a {
  color: white;
  padding: 10px;
  border-bottom: 1px solid #404040;
  display: block;
  margin: 0;
}

div.sticky {
  position: sticky;
  top: 0;
}
<div style="height:100px; background:green;"></div>
    
    <div class="center">
        <header>
            <img class="headerImage" src="images/header.png"/>
            <hr class="menu">
            <div class="sticky">
                <a class="dropmenu"></a>
                <nav class="desktop">
                    <ul>
                        <li><a href="index.php">Sertet</a></li>
                        <li><a href="index.php">Rtretrti</a></li>
                        <li><a href="photos.php">ertettterli</a></li>
                        <li><a href="index.php">retemi</a></li>
                        <li><a href="index.php">Kerterti</a></li>
                    </ul>
                </nav>
            </div>
            </header>
        <hr class="menu">
   <p>content goes here</p>
</div>
Steve K
  • 8,505
  • 2
  • 20
  • 35
14

Usually, it's because of some parent's "overflow" property.

If any parent/ancestor of the sticky element has any of the following overflow properties set, position: sticky won't work:

  • overflow: hidden
  • overflow: scroll
  • overflow: auto

Here's what helped me. Simply copy/paste the following snippet into your browser's console. This will help you to identify all parent elements with overflow property set to something other than visible:

    // Change to your STICKY element
    let parent = document.querySelector('.sticky').parentElement;
    
    while (parent) {
        const hasOverflow = getComputedStyle(parent).overflow;
        if(hasOverflow !== 'visible') {
            console.log(hasOverflow, parent);
        }
        parent = parent.parentElement;
    }

Then it's mostly the issue of setting the right overflow property to the right element.

Maria Ramono
  • 389
  • 4
  • 7
8

It's not the solution to this specific problem, but in case it helps somebody.

I accidentally removed the top CSS rule when refactoring the code, adding it back did the trick for me:

.my-elem {
  position: sticky;
  top: 0;
}
ecairol
  • 6,233
  • 1
  • 27
  • 26
5

For me, I found that overflow: hidden; on a parent container was what was breaking the child's position: sticky;. If overflow on the parent is visible, the sticky starts working.

Milun
  • 91
  • 1
  • 7
  • Exactly. And it's not just a direct parent! Any parent above will break the sticky property. – Thales Kenne Nov 27 '20 at 20:47
  • This is exactly where the problems of sticky position come from. We often set overflow:hidden to the parrent (especially body tag) cause to disable also sticky position. Just remove overflow:hidden or make it visibility and it works. – Phong Jan 15 '21 at 13:33
0

I had no parent elements with overflow so my solution was this:

html, body {
  height: 100%;
  overflow: auto;
}
JanBrus
  • 1,198
  • 9
  • 13