position: sticky in header is not working

Question

My position: sticky does not work. I do not know why that is, I have already tried everything. Below I have my html and css code posted.

// Second
.app-secondheader {
    height: 85px;
    overflow: visible;
    top: 0px;
    background-color: #3B3B3B;
    border-bottom: 4px solid #ED1C24;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding-left: 30px;
    padding-right: 30px;
    top: 0;
    position: -webkit-sticky;
    position: sticky;
}

<!-- Login -->
<nav>
    <!-- Second -->
    <div class="app-secondheader">
      <div class="row">
        <!-- Logo -->
        <div class="pares-logo">
          <a class="pares-logo-link" href="http://test.pares.de">
            <img class="logo" src="./assets/img/logo.png" target="_blank" data-placement="top" data-title="" data-toggle="tooltip" title="" data-original-title="Logo" alt="MyLogo">
          </a>
        </div>
      </div>
    </div>
  </nav>

Possible duplicate of ["Position: sticky;" not Working CSS and HTML](https://stackoverflow.com/questions/43707076/position-sticky-not-working-css-and-html) — Manishh, Dec 25 '17 at 10:32
Sorry, I'm committed. I only deleted the px. top: 0; is still standing. But it does not work anyway — aillense, Dec 25 '17 at 10:44

score 0 · Answer 1 · answered Dec 25 '17 at 10:42

Your problem was you put // Second in CSS file. CSS can't understand that, So it will get crashed if you want to put text you have to put /* This text will work in CSS file */

.app-secondheader {
    height: 85px;
    overflow: visible;
    background-color: #3B3B3B;
    border-bottom: 4px solid #ED1C24;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding-left: 30px;
    padding-right: 30px;
    top: 0;
    position: -webkit-sticky;
    position: sticky;
}

<!-- Login -->
<nav>
    <!-- Second -->
    <div class="app-secondheader">
      <div class="row">
        <!-- Logo -->
        <div class="pares-logo">
          <a class="pares-logo-link" href="http://test.pares.de">
            <img class="logo" src="./assets/img/logo.png" target="_blank" data-placement="top" data-title="" data-toggle="tooltip" title="" data-original-title="Logo" alt="MyLogo">
          </a>
        </div>
      </div>
    </div>
  </nav>

I found my mistake. I had the page on display: flex and that's why position: sticky did not work. Is there a way the display: flex with position: sticky works? — aillense, Dec 26 '17 at 08:42
@aillense Adding align-self: flex-start to the sticky element set the height to auto, which allowed scrolling, and fixed it. — Liam, Dec 26 '17 at 09:30

position: sticky in header is not working

1 Answers1