How To Create a Sticky Navbar 
Tags: css, webdev, codenewbie
Published: 2021-04-11 15:36:36

In today's article I'll show you how to create a sticky navbar.
There's also gonna be two bonuses. <br><br>
It's not really hard, all you have to do is :

```css
ul {
position: fixed;
    top: 0;
}
```
BUT it could be tricky.
So stay with me until the end of this article .

___________________
First thing first :

### Setting up HTML

```html
 <header>

        <!-- This is for our background image -->
        <div class="bg"></div>

        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Projects</a></li>
                <li><a href="">Contact</a></li>
                <li><a href="">About</a></li>
            </ul>
       </nav>
    </header>

  <section>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, unde sequi. Labore, tempora quos veniam sunt deserunt dolor autem ullam eligendi, accusamus laudantium dolore cupiditate dignissimos omnis? Suscipit, ipsam possimus?</p>
    </section>
```
______________________

### Setting up CSS

A. Create a simple navbar

```css
ul {
    width: 100%;
    background-color: rgb(0, 204, 255);
    display: flex;
    justify-content: center;
}

li {
    /* gets rid of the bullets */
    list-style: none;

    margin: 20px 25px;
}

a {
    color: #fff;
    font-size: 120%;
    
    /* gets rid of the link underline */
    text-decoration: none;
}
```

![11.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1618089389371/GLP9R4bE8d.jpeg)

B. Create the background image or your texts or whatever you like, which in my case I created a background image 

```css

.bg {
    position: relative;
    width: 100%;
    min-height: 125vh;

    /* got the image from https://www.gavtrain.com/?p=6851 */
background-image: linear-gradient(rgba(0, 0, 0, 0.801), rgba(0, 0, 0, 0.801)), url(https://www.gavtrain.com/wp-content/uploads/2020/02/Neon-BG-Blog.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: repeat;
}
```

And now if you scroll down, you'll see that the navbar will disappear

![Screencast-from-04-11-2021-01540.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1618090420339/Nqn1X6jXf.gif)
<br>
 
C. It's time to fix this mess by giving the <code>ul</code> element <code>fixed positioning</code>

```css
ul {
position: fixed;
    top: 0;
}
```
This will fixate the navbar on top of the screen.<br>
But as you can see (in the gif below) the navbar disappeared or it's better to say it went behind the background image.<br>
Add <code>z-index:1 ;</code> to your <code>ul</code> element  to fix this.

<br>
**PS** I briefly explained about <code>z-index</code> in [this article](https://dev.to/nazanin_ashrafi/remove-white-border-from-blurry-background-image-3d8j) 



![asas.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618090867279/5JDuIDzio.png)




```css
ul {
    width: 100%;
    background-color: rgb(0, 204, 255);
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    z-index: 1;
}
```

![Screencast-from-04-11-2021-02351.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1618093311575/97Rd7_twl.gif)


Congratulations, you just created a sticky nabvar 🥳🥳
________________

This is the final touch up : <br>

{% codepen https://codepen.io/nazaneyn/pen/rNjpoPX %}


<br><br>
<br>

________________

#### Bonus 1 : **How to stop the navbar from overlapping**<br>

So this is the original background image 
<img src="https://www.gavtrain.com/wp-content/uploads/2020/02/Neon-BG-Blog-960x640.jpg">
(Got the image from  [here](https://www.gavtrain.com/?p=6851)  )


As you see the navbar overlapped on our element and a little bit of image went underneath the navbar 


![51.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1618093959873/fvPbvgWlS.jpeg)


You can fix the overlapping by giving <code>margin-top</code> to the background

{% youtube 40ZYiKUSL2Q %}

Fun fact : I just created a channel just to upload this short video lol<br>


#### Bonus 2 : <br>

For animating link underlines you can <a href="https://tobiasahlin.com/blog/css-trick-animating-link-underlines">check out this amazing article</a>