CSS / html Position:sticky doesn't work for me

Question

I am trying to make a sticky header. I have a logo and below I want to create a nav bar that should be sticky. I am not using JavaScript, just wanted to use position:sticky in CSS. I tried this on other sample codes and it worked, however for some reason it does not work in the web site I am building. I read some tips (remove overflow:hidden, remove fixed height in a parent tag etc.). It still doesn't work for me. Can you please have a look on my code and suggest a solution? thanks a lot!

Html:

<html lang="pl" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Title</title>
  </head>
  <body>
      <div>
            <div class="logo">
                <img src="logo_m2.png" class="logo_img">
            </div>
            <div class="nav-row">
                <div class="main-nav">
                    <ul>
                        <li><a href="#">btn1</a></li>
                        <li><a href="#">btn1</a></li>
                        <li><a href="#">btn1</a></li>
                        <li><a href="#">btn1</a></li>
                        <li><a href="#">btn1</a></li>
                        <li><a href="#">btn1</a></li>
                    </ul>
                </div>
                <div class="main-social">
                    <ul>
                        <li>F</li>
                        <li>U</li>
                        <li>I</li>                    
                    </ul>
                </div>
            </div>
      </div>
      <div class="section">
              <div class="posts">
                    post
              </div>
              <div class="r-panel">
                   r-panel
              </div> 
      </div>
      <footer>
        footer
      </footer>
  </body>
</html>

Css:

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    box-sizing: border-box;
    color:#2d3436;
    width: 100%;
    padding:40px;
    padding-top: 0;

}

.logo{
    border-bottom-style: solid;
    border-width: 1.5px;
 }

.logo_img {
    display:block;
    margin-right: auto;
    margin-left: auto;
    width:50%;
    height: auto;
}

nav-row {
    margin: 5px;
    height: 40px;
    border: solid;
    position: sticky;
    top:0;
    }

.main-nav{
    float:left;
}

.main-social{
    float:right;
}

.main-nav li {
    display:inline-block;
}


.main-social li{
    display: inline-block;

}

.section {
    margin-top: 10px;
    height:1000px;
    border-style:dotted;
    }

.posts{
    border-color:red;
    border-style: solid;
}



footer {
    border-top: solid;
    border-color: #3c3c3c;
    height: 50px;
    }

a gold rule to identify any issue related to sticky is to identify the parent element and see if there is any room to move inside that element — Temani Afif, Feb 01 '19 at 20:05

score 2 · Answer 1 · answered Feb 01 '19 at 19:52

This is works. I removed unnecessary parent divs. I showed you where I removed in HTML.

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  box-sizing: border-box;
  color:#2d3436;
  width: 100%;
  padding:40px;
  padding-top: 0;

}

.logo{
  border-bottom-style: solid;
  border-width: 1.5px;
}

.logo_img {
  display:block;
  margin-right: auto;
  margin-left: auto;
  width:50%;
  height: auto;
}

.nav-row {
  margin: 5px;
  height: 40px;
  border: solid;
  position: sticky;
  top:0;
}

.main-nav{
  float:left;
}

.main-social{
  float:right;
}

.main-nav li {
  display:inline-block;
}


.main-social li{
  display: inline-block;

}

.section {
  margin-top: 10px;
  height:1000px;
  border-style:dotted;
}

.posts{
  border-color:red;
  border-style: solid;
}



footer {
  border-top: solid;
  border-color: #3c3c3c;
  height: 50px;
}

<html lang="pl" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Title</title>
  </head>
  <body>
     <!-- I removed this <div> -->
            <div class="logo">
                <img src="logo_m2.png" class="logo_img">
            </div>
            <div class="nav-row">
                <div class="main-nav">
                    <ul>
                        <li><a href="#">btn1</a></li>
                        <li><a href="#">btn1</a></li>
                        <li><a href="#">btn1</a></li>
                        <li><a href="#">btn1</a></li>
                        <li><a href="#">btn1</a></li>
                        <li><a href="#">btn1</a></li>
                    </ul>
                </div>
                <div class="main-social">
                    <ul>
                        <li>F</li>
                        <li>U</li>
                        <li>I</li>                    
                    </ul>
                </div>
            </div>
      <!-- I removed this </div> -->
      <div class="section">
              <div class="posts">
                    post
              </div>
              <div class="r-panel">
                   r-panel
              </div> 
      </div>
      <footer>
        footer
      </footer>
  </body>
</html>

check this for the why : https://stackoverflow.com/a/52997848/8620333 — Temani Afif, Feb 01 '19 at 20:04

CSS / html Position:sticky doesn't work for me

1 Answers1