Search code examples
htmlcssdrop-down-menusticky

How to eliminate gap on sticky mode?

When I deploy this drop down menu in sticky mode (that is when I scroll down the content page) there is a gap in the "books" submenu between "read" and "link 1/link 2/link 3", which is not there in the "video" submenu > "watch/download". The gap is not there when the navbar is top page.

How can I fix it?

window.onscroll = function() {
  myFunction()
};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

img {
  display: block;
  margin: 0 auto;
}

h2 {
  font-family: Times New Roman, serif;
  font-size: 17px;
  font-style: italic;
  color: black;
  background-color: white padding: 30px;
  text-align: center;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
  background-color: #333;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
  background-color: #333;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: red;
  color: white;
}

#navbar .search-container {
  float: right;
}

#navbar input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

#navbar .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

#navbar .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  #navbar .search-container {
    float: none;
  }
  #navbar a,
  .navbar input[type=text],
  .navbar .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  #navbar input[type=text] {
    border: 1px solid #ccc;
  }
}

.content {
  padding: 16px;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: #ddd;
  color: black;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  overflow: visible !important;
}

.sticky+.content {
  padding-top: 60px;
}

.sticky .dropdown-content {
  top: 48px;
}

.subnav {
  float: left;
  overflow: hidden;
}

.subnav .subnavbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: #f2f2f2;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.subnav:hover .subnavbtn {
  background-color: #ddd;
  color: #f2f2f2;
}

.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #333;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.subnav-content a {
  float: left;
  color: #f2f2f2;
  text-decoration: none;
}

.subnav-content a:hover {
  background-color: #ddd;
}

.subnav:hover .subnav-content {
  display: block;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: #f2f2f2;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  /* Important for vertical 
align on mobile phones */
  margin: 0;
  /* Important for vertical align on mobile 
phones */
}

.dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #333;
  min-width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #f2f2f2;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, 
initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div id="navbar">
    <a class="active" href="#home">Home</a>
    <div class="subnav">
      <button class="subnavbtn">Books <i class="fa fa- 
caret-down"></i></button>
      <div class="subnav-content">
        <div class="subnav">
          <div class="dropdown">
            <button class="dropbtn">Read 
<i class="fa fa-caret-down"></i>
</button>
            <div class="dropdown-content">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
          </div>
          <a href="#team">PDF 1</a>
          <a href="#careers">PDF 2</a>
        </div>
      </div>
    </div>
    <div class="subnav">
      <button class="subnavbtn">Video <i class="fa fa- 
caret-down"></i></button>
      <div class="subnav-content">
        <a href="#bring">Watch</a>
        <a href="#deliver">Download</a>
      </div>
    </div>
    <a href="#contact">Contact</a>
    <div class="search-container">
      <form action="/action_page.php">
        <input type="text" placeholder="Search.." name="search">
        <button type="submit"><i class="fa fa-search"></i> 
</button>
      </form>
    </div>
  </div>
  <div style="padding:0 16px">
    <h3>Subnav/dropdown menu inside a Navigation Bar
    </h3>
    <p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
  </div>
  </div>
  </div>
  <div class="content">
  </div>
  </div>
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
  </div>
  /
</body>

</html>

Solution

  • You've set the .dropdown-content to be 48px from the top of it's containing block when it is a child of an element with the class .sticky this creates a 2px gap because it's containing element (.subnav-content) is only 46px in height. You can fix it by setting the .dropdown-content to be 100% from the top of it's containing block instead of at 48px:

    .sticky .dropdown-content {
  top: 100%;
}


    window.onscroll = function() {
  myFunction()
};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
    * {
  box-sizing: border-box;
}

body {
  margin: 0;
}

img {
  display: block;
  margin: 0 auto;
}

h2 {
  font-family: Times New Roman, serif;
  font-size: 17px;
  font-style: italic;
  color: black;
  background-color: white padding: 30px;
  text-align: center;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
  background-color: #333;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
  background-color: #333;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: red;
  color: white;
}

#navbar .search-container {
  float: right;
}

#navbar input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

#navbar .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

#navbar .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  #navbar .search-container {
    float: none;
  }
  #navbar a,
  .navbar input[type=text],
  .navbar .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  #navbar input[type=text] {
    border: 1px solid #ccc;
  }
}

.content {
  padding: 16px;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: #ddd;
  color: black;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  overflow: visible !important;
}

.sticky+.content {
  padding-top: 60px;
}

.sticky .dropdown-content {
  top: 100%;
}

.subnav {
  float: left;
  overflow: hidden;
}

.subnav .subnavbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: #f2f2f2;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.subnav:hover .subnavbtn {
  background-color: #ddd;
  color: #f2f2f2;
}

.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #333;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.subnav-content a {
  float: left;
  color: #f2f2f2;
  text-decoration: none;
}

.subnav-content a:hover {
  background-color: #ddd;
}

.subnav:hover .subnav-content {
  display: block;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: #f2f2f2;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  /* Important for vertical 
align on mobile phones */
  margin: 0;
  /* Important for vertical align on mobile 
phones */
}

.dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #333;
  min-width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #f2f2f2;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}
    <!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, 
initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div id="navbar">
    <a class="active" href="#home">Home</a>
    <div class="subnav">
      <button class="subnavbtn">Books <i class="fa fa- 
caret-down"></i></button>
      <div class="subnav-content">
        <div class="subnav">
          <div class="dropdown">
            <button class="dropbtn">Read 
<i class="fa fa-caret-down"></i>
</button>
            <div class="dropdown-content">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
          </div>
          <a href="#team">PDF 1</a>
          <a href="#careers">PDF 2</a>
        </div>
      </div>
    </div>
    <div class="subnav">
      <button class="subnavbtn">Video <i class="fa fa- 
caret-down"></i></button>
      <div class="subnav-content">
        <a href="#bring">Watch</a>
        <a href="#deliver">Download</a>
      </div>
    </div>
    <a href="#contact">Contact</a>
    <div class="search-container">
      <form action="/action_page.php">
        <input type="text" placeholder="Search.." name="search">
        <button type="submit"><i class="fa fa-search"></i> 
</button>
      </form>
    </div>
  </div>
  <div style="padding:0 16px">
    <h3>Subnav/dropdown menu inside a Navigation Bar
    </h3>
    <p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
  </div>
  </div>
  </div>
  <div class="content">
  </div>
  </div>
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.
  </p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
    efficiantur his ad. Eum no molestiae voluptatibus.</p>
  </div>
  /
</body>

</html>