How to eliminate gap on sticky mode?

up vote
0
down vote

favorite

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>

edited Nov 5 at 2:13

Obsidian Age

26k72244

asked Nov 5 at 2:09

Antonio Maccagnan

add a comment |

up vote
0
down vote

favorite

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>

edited Nov 5 at 2:13

Obsidian Age

26k72244

asked Nov 5 at 2:09

Antonio Maccagnan

add a comment |

up vote
0
down vote

favorite

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>

edited Nov 5 at 2:13

Obsidian Age

26k72244

asked Nov 5 at 2:09

Antonio Maccagnan

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>

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>

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>

html css drop-down-menu sticky

edited Nov 5 at 2:13

Obsidian Age

26k72244

asked Nov 5 at 2:09

Antonio Maccagnan

edited Nov 5 at 2:13

Obsidian Age

26k72244

asked Nov 5 at 2:09

Antonio Maccagnan

edited Nov 5 at 2:13

Obsidian Age

26k72244

edited Nov 5 at 2:13

Obsidian Age

26k72244

edited Nov 5 at 2:13

Obsidian Age

26k72244

asked Nov 5 at 2:09

Antonio Maccagnan

asked Nov 5 at 2:09

Antonio Maccagnan

asked Nov 5 at 2:09

Antonio Maccagnan

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

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>

answered Nov 5 at 11:42

Danny

68118

Thanks for the solution and the explanation, it's goot to learn stuff.
– Antonio Maccagnan
2 days ago

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53147436%2fhow-to-eliminate-gap-on-sticky-mode%23new-answer', 'question_page');
}
);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

.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>

answered Nov 5 at 11:42

Danny

68118

Thanks for the solution and the explanation, it's goot to learn stuff.
– Antonio Maccagnan
2 days ago

add a comment |

up vote
0
down vote

accepted

.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>

answered Nov 5 at 11:42

Danny

68118

Thanks for the solution and the explanation, it's goot to learn stuff.
– Antonio Maccagnan
2 days ago

add a comment |

up vote
0
down vote

accepted

.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>

answered Nov 5 at 11:42

Danny

68118

.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>

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>

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>

answered Nov 5 at 11:42

Danny

68118

answered Nov 5 at 11:42

Danny

68118

answered Nov 5 at 11:42

Danny

68118

answered Nov 5 at 11:42

Danny

68118

Thanks for the solution and the explanation, it's goot to learn stuff.
– Antonio Maccagnan
2 days ago

add a comment |

Thanks for the solution and the explanation, it's goot to learn stuff.
– Antonio Maccagnan
2 days ago

Thanks for the solution and the explanation, it's goot to learn stuff.
– Antonio Maccagnan
2 days ago

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk