Sticky Navbar still moves

user_12380685 0
Viewed 54

On my landing page, with a position: sticky nav bar, The navbar will stay at the top of the page but it does not stay completely stationary while scrolling

Codepen: https://codepen.io/jcrainey/pen/rNGLyOQ

I've tried setting a fixed height to .sticky but it just adds space to the bottom of the navbar. Any thoughts on how to make it stay completely stationary?

   body {
        padding: 0;
        margin: 0;
        background: white;
        color: black;
        font-family: 'Helvetica', sans-serif;
    }
    
    .sticky {
        background-color: white;
        position: sticky;
        top: 0;
        height: 60px;
    }
    
    .navbar {
        position: sticky;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        list-style: none;
    }
    
    .links {
        font-size: 30px;
        text-decoration: none;
        color: gray;
        padding: 0px 20px 0px 0px;
    
    }
    
    li:nth-child(1) {
        margin-right: auto;
        margin-left: -20px;
    }
    
    .links:hover {
        color: black;
    }
    
    .intro {
        display: flex;
        justify-content: center;
        font-family: 'Helvetica', sans-serif;
        font-size: 35px;
    }
    
    .scroll {
        display: flex;
        justify-content: center;
        background-color: white;
        height: 2000px;
    }
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="landingpage.css">
        <title>Landing Page</title>
    </head>
    <body>
        <div class="sticky">
            <nav>
                <ul class= "navbar">
                    <li><a class = "links" href = "#">HOME</a></li>
                    <li><a class = "links" href="#projects">PROJECTS</a></li>
                    <li><a class = "links" href="#blog">BLOG</a></li>
                </ul>
            </nav>
        </div>
        <div class = "intro">
            <h1>JC Rainey</h1>
        </div>
        <div class="scroll">just to show what happens when you scroll</div>
    </body>
    </html>

css html
4 Answers

.navbar has inherited margins.

Set a margin: 0 on .navbar and give it a height.

.navbar {
  position: sticky;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
  margin: 0;
  height: 60px;
}

You should be able to remove the height from .sticky too.

user_14332680

You don't have to adjust the height, or set the top padding. The reason why your navbar was moving is that it will move towards the top until any "explicitly defined" margin, or any "existing margin" is completely gone. You need to only add margin: 0; to your .navbar element in your style-sheet, like in the snippet below.

Just a tip. If you press F12 to open the tools, and find the nav-bar element in the HTML that is rendered in the chrome dev-tools, click on it, and it will show you what youre padding, margin, and border all are set too.

body {
    padding: 0;
    margin: 0;
    background: white;
    color: black;
    font-family: 'Helvetica', sans-serif;
}

.sticky {
    background-color: white;
    position: sticky;
    top: 0;
    height: 60px;
}

.navbar {
    position: sticky;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
    margin-top:0;
}

.links {
    font-size: 30px;
    text-decoration: none;
    color: gray;
    padding: 0px 20px 0px 0px;

}

li:nth-child(1) {
    margin-right: auto;
    margin-left: -20px;
}

.links:hover {
    color: black;
}

.intro {
    display: flex;
    justify-content: center;
    font-family: 'Helvetica', sans-serif;
    font-size: 35px;
}

.scroll {
    display: flex;
    justify-content: center;
    background-color: white;
    height: 2000px;
}
user_124754830

One possibility is to add padding-top: 1px; to .sticky. The reason: The included ul (.navbar) has default top and bottom margins, which are not included in the "sticky" part (aka "collapsing margins"). Adding just one pixel of padding-top to the parent prevents that.

body {
    padding: 0;
    margin: 0;
    background: white;
    color: black;
    font-family: 'Helvetica', sans-serif;
}

.sticky {
    background-color: white;
    position: sticky;
    top: 0;
    height: 60px;
    padding-top: 1px;
}

.navbar {
    position: sticky;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
}

.links {
    font-size: 30px;
    text-decoration: none;
    color: gray;
    padding: 0px 20px 0px 0px;

}

li:nth-child(1) {
    margin-right: auto;
    margin-left: -20px;
}

.links:hover {
    color: black;
}

.intro {
    display: flex;
    justify-content: center;
    font-family: 'Helvetica', sans-serif;
    font-size: 35px;
}

.scroll {
    display: flex;
    justify-content: center;
    background-color: white;
    height: 2000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="landingpage.css">
    <title>Landing Page</title>
</head>
<body>
    <div class="sticky">
        <nav>
            <ul class="navbar">
                <li><a class = "links" href = "#">HOME</a></li>
                <li><a class = "links" href="#projects">PROJECTS</a></li>
                <li><a class = "links" href="#blog">BLOG</a></li>
            </ul>
        </nav>
    </div>
    <div class = "intro">
        <h1>JC Rainey</h1>
    </div>
    <div class="scroll">just to show what happens when you scroll</div>
</body>
</html>

user_56416690

There are a few things going on here.

1st, you have position: sticky in 2 places: .sticky and .navbar. I removed it from your .navbar. 2nd, your ul is inheriting browser styles. (It's often useful to use a CSS reset to remove these: https://necolas.github.io/normalize.css/.) I removed the margin from your ul and gave it a 1em padding. 3rd, I removed your negative margin on your first li. Is this what you're looking for?

body {
        padding: 0;
        margin: 0;
        background: white;
        color: black;
        font-family: 'Helvetica', sans-serif;
    }
    
    .sticky {
        background-color: white;
        position: sticky;
        top: 0;
        height: 60px;
    }
    
    .navbar {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 1em;
    }
    
    .links {
        font-size: 30px;
        text-decoration: none;
        color: gray;
        padding: 0px 20px 0px 0px;
    
    }
    
    li:nth-child(1) {
        margin-right: auto;
    }
    
    .links:hover {
        color: black;
    }
    
    .intro {
        display: flex;
        justify-content: center;
        font-family: 'Helvetica', sans-serif;
        font-size: 35px;
    }
    
    .scroll {
        display: flex;
        justify-content: center;
        background-color: white;
        height: 2000px;
    }
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="landingpage.css">
        <title>Landing Page</title>
    </head>
    <body>
        <div class="sticky">
            <nav>
                <ul class= "navbar">
                    <li><a class = "links" href = "#">HOME</a></li>
                    <li><a class = "links" href="#projects">PROJECTS</a></li>
                    <li><a class = "links" href="#blog">BLOG</a></li>
                </ul>
            </nav>
        </div>
        <div class = "intro">
            <h1>JC Rainey</h1>
        </div>
        <div class="scroll">just to show what happens when you scroll</div>
    </body>
    </html>

user_76690100
Related