Navigational Menu Not Being Sticky, Has White Gap

Question

Hi I am trying to remove the white space between the navigational bar and header. However, the margin and padding are already set to 0 for the body, and i've done it for the whole document (*). Furthermore, I am trying to make the navigational bar sticky. And scroll and stay at the top of the document once you scroll past the initial top: 0. I've followed tutorials online but it didnt work...

The website I am trying to have it created like it Mineplex.com the popular Minecraft website. But for some reason white space is between the header and navigational bar as well as that the navigational bar is not remaining sticky.

Can someone please help or point me in the right direction as I am extremely confused.

body {
    height: 5048px;
  /*  background-color: #f1f1f1; */
    padding: 0;
    margin: 0;
}

.header--main {
    height: 300px;
background-color: purple;
}



nav {
    width: 100%;
    height: 50px;
 /*   background-image: linear-gradient(to bottom, #4c45b2, #25accf);*/
background-color: red;
    position: -webkit-sticky;
    top: 0;
}

nav ul {
    text-align: center;
    list-style-type: none;
}

nav ul li {

    display: inline-block;
}

nav ul li a {
    text-decoration: none;
    display: block;
    padding: 14px 28px;
    font-size: 16px;
    color: white;
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
}

nav ul li a:active {
    background-color: white;
    color: #484848;
}

nav ul li a:hover {
    background-color: white;
    color: #484848;
}

/*Make navbar font to open sans*/

    <header>
        <div class="header--main">



        </div>
        <nav class="sticky">
            <ul>
                <li><a href=”./index.html”>Home</a></li>
                <li><a href=”#”>Registration</a> </li>
                <li> <a href=”#”>Order</a></li>
                <li> <a href=”#”>Features</a></li>
            </ul>
        </nav>
    </header>

<article>
    <section>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



    </section>


</article>

eytienne · Answer 1 · 2019-09-29T21:50:08.203

This could solve your problem, I moved the nav out of your header and it works well:

https://codepen.io/eytienne/pen/WNeBYdQ

<header>
</header>
<nav class="sticky">
  <ul>
    <li><a href=”./index.html”>Home</a></li>
    <li><a href=”#”>Registration</a> </li>
    <li> <a href=”#”>Order</a></li>
    <li> <a href=”#”>Features</a></li>
  </ul>
</nav>
<article>
  <section>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  </section>

</article>

body {
  height: 5048px;
  /*  background-color: #f1f1f1; */
  padding: 0;
  margin: 0;
}

header {
  height: 300px;
  background-color: purple;
}

nav {
  width: 100%;
  height: 50px;
  background-color: red;
  position: sticky;
  top: 0;
}

nav ul {
  text-align: center;
  list-style-type: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
  display: block;
  padding: 14px 28px;
  font-size: 16px;
  color: white;
  font-weight: bold;
  font-family: "Open Sans", sans-serif;
}

nav ul li a:active {
  background-color: white;
  color: #484848;
}

nav ul li a:hover {
  background-color: white;
  color: #484848;
}

/*Make navbar font to open sans*/

Please add your (working) code to the answer. – A. Meshu Sep 29 '19 at 21:41 — A. Meshu, Sep 29 '19 at 21:41

Fii · Accepted Answer · 2019-09-29T21:44:04.747

The problem with the margin between navigation and header is that the <ul> has a margin by default. Just add a margin: 0; to the styles for nav ul and you're good.
You can spot these kind of problems easily using your browser's developer tools. They will show you which element a spacing belongs to.

Regarding the sticky navigation, there are actually two problems.

Most browsers (except Safari) require position: sticky, not -webkit-sticky.
position: sticky does not work when the sticky element is inside a scrolling element (which is <header>, in your case). Simply removing the <header> element produces the desired behavior. To keep the element, you would probably need to make it sticky, too.

Here is a working version:

body {
  height: 5048px;
  /*  background-color: #f1f1f1; */
  padding: 0;
  margin: 0;
}

.header--main {
  height: 300px;
  background-color: purple;
}

nav {
  width: 100%;
  height: 50px;
  /*   background-image: linear-gradient(to bottom, #4c45b2, #25accf);*/
  background-color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

nav ul {
  text-align: center;
  list-style-type: none;
  margin: 0;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
  display: block;
  padding: 14px 28px;
  font-size: 16px;
  color: white;
  font-weight: bold;
  font-family: 'Open Sans', sans-serif;
}

nav ul li a:active {
  background-color: white;
  color: #484848;
}

nav ul li a:hover {
  background-color: white;
  color: #484848;
}


/*Make navbar font to open sans*/

<div class="header--main">



</div>
<nav class="sticky">
  <ul>
    <li><a href=”./index.html”>Home</a></li>
    <li><a href=”#”>Registration</a> </li>
    <li> <a href=”#”>Order</a></li>
    <li> <a href=”#”>Features</a></li>
  </ul>
</nav>


<article>
  <section>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



  </section>


</article>

Thanks @jmb. But the navigational bar is still not being sticky? — PandaPlaysAll, Sep 29 '19 at 21:21
@PandaPlaysAll You're welcome! :) For future questions, keep in mind to not post your whole code, but just a minimal example that shows your problem. You'll get way more and better answers then. — Fii, Sep 29 '19 at 21:52

score 0 · Answer 3 · answered Sep 29 '19 at 21:54

The gap you are getting is ul element default css values, which are

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

So to solve your problem you can update your css:

nav ul {
  text-align: center;
  list-style-type: none;
  margin: 0;
}

Navigational Menu Not Being Sticky, Has White Gap

3 Answers3