How to code a sticky navbar?

Hi I was wondering how to code a sticky navbar using html and css I have looked all over the internet but none of them work. Thanks for your help in advance.

Here is how you can do it using jQuery: https://codepen.io/emgo/pen/OPYjqL

Depending how you structure your html, you can also use a css property position: fixed;. This will cause the element to remain in the same position within the screen regardless of scrolling.

@Emgo Can it be changed to be a navbar across the top of the page?

Not in that example. It uses a jQuery to detect scrolling, and add padding to element, so it looks like it’s sticky, but it’s top padding is just pushing it down with hte page scroll.

If you have a header spanning your page at the top, just add fixed position.

<header style="position: fiexed;">
    <h1>Logo</h1>
    <nav>
        <ul>
            <li><a href="#"></li>
            <li><a href="#"></li>
            <li><a href="#"></li>
        </ul>
    </nav>
</header>

This is the bare minimum of what you must do to achieve this kind of behavior. I’d suggest you do more, but this is a start.

@Emgo this code isn’t working for me

@Emgo ok it’s working but it is too far a way from the url bar and how do i make there a background and there be a space for the nav bar when it is at the top

If you want a pure html & css solution, there is the position sticky property.

You might also find this recent topic useful:

Ok so now it’s sticking to the top but a big gap between the url bar and it’s transparent here’s my code:

<nav id="nav" class="nav-container">
      <header style="position: fixed;">
    	<ul>
        <li><a href="index.html">Home</a></li>
      <li><a href="blog.html">Blog</a></li>
        <li><a
      href="Instagram.html">Instagram</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="location.html">Location</a></li>
        <li><a href="Feedback.html">Feedback</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="Login-Sign-up.html">Log In or Sign Up</a></li>
    	</ul>
    </nav>


If you’d like I could post my site to show you what’s happening

Yes, we at least need to see the css too.

What’s that doing in there?

@SamA74 It’s what is making it stick as shown on my website: https://poodles-days.000webhostapp.com

ohh and here’s my css:

.nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;}
 .f-nav{ z-index: 9999; position: sticky; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */

.nav { height: 42px;}
 .nav ul { list-style: none; }
 .nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}
 .nav ul li:first-child{ padding-left: 0;}
 .nav ul li a { }
 .nav ul li a:hover{ text-decoration: underline;}

#nav {
	margin: 13px 0 0 25px;
}

#nav ul li {
	display: inline;
	margin: 0 20px 0 0;
	margin-bottom: 130px;
}

#nav a {
	text-decoration: none;
}

#nav a:hover {
	text-decoration: underline;
}

That’s all the nav css

but the nav bar is too far away from the url bar and transparent and i’d like it to be like the sitepoint nav bar but with links also i tried using the code from the article that you told me to look at but .menu would always go red and it didn’t stick.
@SamA74

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.