{"id":5703,"date":"2021-10-28T02:00:00","date_gmt":"2021-10-28T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/sticky-navbar\/"},"modified":"2024-07-17T14:48:07","modified_gmt":"2024-07-17T12:48:07","slug":"sticky-navbar","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/sticky-navbar\/","title":{"rendered":"How to Create a Sticky Navbar [CSS & JS]"},"content":{"rendered":"\n

To create a sticky navbar, you use the position: fixed;<\/code> CSS property to “stick” your navbar to the viewport and position: sticky;<\/code> to make it stick to its parent element.<\/p>\n\n\n\n

In this post, you’ll learn what all of this means, and how to make a sticky navbar<\/strong> for your own site.<\/p>\n\n\n\n

Let’s go!<\/p>\n\n\n\n

What Is<\/em> a Sticky Navbar?<\/h2>\n\n\n\n

But before we proceed, we need to clear one thing up. What exactly do you mean by “sticky”?<\/p>\n\n\n\n

You see, in the world of CSS, sticky<\/code> means something very specific. In fact, there are two settings you use to “stick” an element to a specific part of the screen while the visitor scrolls. These are:<\/p>\n\n\n

position<\/span>: sticky<\/span>;\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Or…<\/p>\n\n\n
position<\/span>: fixed<\/span>;\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
There’s a big difference between them:<\/p>\n\n\n\n
    \n
  • fixed<\/code> elements stay in the same position on the viewport, regardless of scrolling. So, as you scroll down the page, they seem to ‘float’ over the content.<\/li>\n\n\n\n
  • sticky<\/code> elements are similar – they stay in the same position on the viewport, regardless of scrolling, but only within their parent element<\/em>. When the viewport reaches the end of a sticky element’s parent, it will behave like a relatively positioned element.<\/li>\n<\/ul>\n\n\n\n
    In this post, you’ll learn how to make a commonly used version of the sticky navbar<\/strong> – one that starts out positioned in your site’s header but not right at the top. Then, as the visitor scrolls past, it “sticks” to the top of the screen<\/strong> and stays in view as they scroll.<\/p>\n\n\n\n
    Here’s how you do it…<\/p>\n\n\n\n
    1) Make a Simple Website for the Sticky Navbar<\/h2>\n\n\n\n
    First, let’s build a site where the sticky navbar can be installed. We’ll make a simple one-page site with some jokes from famous comedians.<\/p>\n\n\n\n
    Each link in our sticky navbar will point to a different section of the site – so we’ll use a few <section><\/code> elements with some space for content inside. Here’s the structure:<\/p>\n\n\n
    <section<\/span> id<\/span>=\"\"<\/span>><\/span>\n  <article<\/span>><\/span>\n    <h2<\/span>><\/span><\/h2<\/span>><\/span>\n    <p<\/span>><\/span><\/p<\/span>><\/span>\n  <\/article<\/span>><\/span>\n<\/section<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    And here’s the CSS:<\/p>\n\n\n
    @import<\/span> url('https:\/\/fonts.googleapis.com\/css2?family=Caveat&family=Poppins:wght@300&display=swap'<\/span>);\n\nbody<\/span> {\n  font-family<\/span>: poppins, sans-serif;  \n  margin<\/span>: 0px<\/span>;\n}\n\nsection<\/span> {\n  min-height<\/span>: 100vh<\/span>;\n}\n\narticle<\/span> {\n  width<\/span>: 90%<\/span>;\n  max-width<\/span>: 600px<\/span>;\n  padding<\/span>: 20px<\/span>;\n  margin<\/span>: 0px<\/span> auto;\n}\n\nh2<\/span> {\n  text-align<\/span>: center;\n  padding<\/span>: 40px<\/span> 0px<\/span> 0px<\/span> 0px<\/span>;\n  font-size<\/span>: 3em<\/span>;\n}\n\np<\/span> {\n  font-size<\/span>: 1.5em<\/span>;\n  text-align<\/span>: center;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    We can then style each individual section via it’s id<\/code>, so the section for the comedian Bill Hicks could look like this:<\/p>\n\n\n
    section<\/span>#bill-hicks<\/span> {\n  background<\/span>: rgb<\/span>(123<\/span>,211<\/span>,232<\/span>);\n  background<\/span>: linear-gradient<\/span>(135deg<\/span>, rgba(123<\/span>,211<\/span>,232<\/span>,1<\/span>) 0%<\/span>, rgba<\/span>(232<\/span>,123<\/span>,165<\/span>,1<\/span>) 0%<\/span>, rgba<\/span>(255<\/span>,50<\/span>,50<\/span>,1<\/span>) 100%<\/span>);\n  color<\/span>: #40081a<\/span>;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    And after Googling some jokes and adding some more styles for each section, we get this:<\/p>\n\n\n\n