DEV Community

Code The Web profile image Ethan
Ethan for Code The Web

Posted on • Originally published at codetheweb.blog on

Styling a navigation bar using CSS

#css #beginners #webdev #tutorial

You can find navigation bars on almost any website on the internet. Learn how to code and style one in this article!

The final product

Here is what we'll be making today:

The final product

You can see a live demo here.

Terminology

Lol, this sounds like the start of a legal agreement 😂

For the purposes of this article, a navigation bar (nav-bar) is the same thing as a header. I'll be using the term "nav-bar" in this article, but just know that they are basically the same.

Getting started

I recommend that you follow along in each of my tutorials - it will really help you learn and grasp the concepts faster. Especially in tutorials like this, it will be fun to code along.

To get started, create a new project folder and create blank index.html and style.css files inside. Let's get going and fill them up!

The HTML

As you know, the HTML is the start of any website. Add the following to your index.html file:

<!DOCTYPE html>
<html>
    <head>
        <title>Navigation bar DEMO</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
           <img src="https://codetheweb.blog/assets/img/icon2.png">
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Terms of use</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consequat libero eget magna commodo, quis pharetra tellus pretium. Sed viverra ante in mauris finibus dapibus. Maecenas congue dapibus nulla, eu gravida orci consequat eu. Phasellus nec nunc malesuada, aliquam massa ac, accumsan metus. Fusce sed dignissim lectus. Nunc elit tellus, sollicitudin ac accumsan ut, egestas et dui. Maecenas aliquam est a ligula scelerisque, in aliquam neque sodales. Nullam condimentum euismod dictum. Curabitur non ex elementum, pretium enim ut, ornare ipsum.</p>
        </main>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Inside the body, we have the header and navigation elements. If you are not familiar with this structure of a navigation bar in HTML, take a look at this article.

Below the header, we have some dummy text inside the <main> element. This is so that we can see problems that will arise later in the tutorial.

Open up your index.html file in a browser - at this point, it should look like so:

The basic HTML viewed in our browser

Not that you will probably have to scroll down unless you are reeeaaaally zoomed out because our image is massive!

Time for our CSS...

The basic CSS

First of all, our image is waaaaaay too big. Let's shrink it down to a height of 80px - this will be the height of our nav-bar. Add the following to your style.css file:

header img {
    height: 80px;
}
Enter fullscreen mode Exit fullscreen mode

Result:
The image is now a good size!

Phew, I can breathe now 😅

Next, let's set our styling up so we will be able to see what's going on. First of all, we want to be able to scroll - we can do this by setting the <body> height to 125vh (viewport height). We want to be able to see when we are scrolling down, and we can do this by adding a background-image. While we're at it, let's set our font to sans-serif so it doesn't look as terrible. Here's the CSS:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

One more thing, let's add a color to our <main> so that we can see the dummy text better:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
}

main {
    color: white;
}
Enter fullscreen mode Exit fullscreen mode

Here's the result of all that:
The result of the styles so far

Don't worry about changing the colors of the links because we will be styling those later anyway.

Positioning the nav-bar

Okay, now our website is looking alright - but not our nav-bar! It still looks like a list, because whenever you make a navigation bar, it has to have a specific structure (the one containing an <ul>). This is because it is easier for web crawlers to navigate, and also Google will like you 😉

First of all, let's start by positioning the actual <header> element. We'll also want to give the <header> a background-color so that we can see its position. Let's add some styles!

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
}
Enter fullscreen mode Exit fullscreen mode

Here' we're positioning the <header> element usingposition : fixed. Then, we also set the height to 80px like I mentioned earlier (the only reason that we're using that specific is because it looks good).

Here is the result:
The header is now positioned!

Yay, our header/nav-bar is now positioned! However, the dummy text in the <main> has been obscured 😕

Now that the nav-bar has a position of fixed, the rest of the content on the page moves up. This means that the main text is actually underneath our nav-bar!

To fix this, we simply need to give the body a margin-top equal to the height of the nav-bar, 80px:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
}
Enter fullscreen mode Exit fullscreen mode

Result:
The main text is no longer hidden under the nav-bar!

Woo! The only thing is that now the text is right up against the bottom of the nav-bar 😕 Let's fix it by adding some padding (I totally didn't mean for that to rhyme 😂) - here is the CSS:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
    padding: 30px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
}
Enter fullscreen mode Exit fullscreen mode

Result:
Now the text has some padding
Much better!

Here are the margin and padding of the body visualized:
The margin and padding of the body visualized
(the margin is orange, the padding is green and the main part of the body is blue)

Congrats, now we've got our page pretty much working! However, not the stuff inside the <header> - it is overlapping the rest of the text and looks bad.

Styling the contents of the nav-bar

Now, let's position the items inside the nav-bar! First of all, we want to make the items go horizontally instead of vertically. We can do this using display: inline:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
    padding: 30px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
}

header * {
    display: inline;
}
Enter fullscreen mode Exit fullscreen mode

Here, we are using the selector header *. The * is a wildcard and can mean any element. So header * basically means any element inside the header. Also, note that when we use display: inline, the bullet points go away. The reason that the bullet points appear in the first place is that by default <li> elements have a display type of list-item. So when we override this and change it to inline, the bullet points disappear.

Here is the result:
The header items are now displayed horizontally

However, our links now go to the bottom of the nav-bar! We can make them go to the top of the nav-bar by giving our <header> element a display property of flex:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
    padding: 30px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
}

header * {
    display: inline;
}
Enter fullscreen mode Exit fullscreen mode

Result:
The nav-bar items are now at the top of the screen

However, the text is still not vertically aligned to the middle of the nav-bar. We can vertically align our items in the nav-bar using align-items: center. If you don't know about display: flex or align-items: center, check out my flexbox tutorial. Here is the CSS:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
    padding: 30px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    align-items: center;
}

header * {
    display: inline;
}
Enter fullscreen mode Exit fullscreen mode

Result:
Woo! Our nav-bar items are finally vertically aligned!

However, all the links in the nav-bar are very squished together - we can space them out more by giving them a margin property:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
    padding: 30px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    align-items: center;
}

header * {
    display: inline;
}

header li {
    margin: 20px;
}
Enter fullscreen mode Exit fullscreen mode

Result:
The items in the nav-bar are now much more spaced out

That looks better! Now that our nav-bar items are positioned, it's time to give them some styles! We want to take away the ugly default link styles, so let's go ahead and do that - we can set the color to black and the text-decoration to none (normally it would be underline). Here is the CSS:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
    padding: 30px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    align-items: center;
}

header * {
    display: inline;
}

header li {
    margin: 20px;
}

header li a {
    color: black;
    text-decoration: none;
}
Enter fullscreen mode Exit fullscreen mode

Result:
The links in our nav-bar are now rid of the default styling :)

We're on the final stretch now! Our logo (well, my logo technically 😜) looks a bit weird, so let's fix up the positioning by adding a margin-left! Here is the CSS:

header img {
    height: 80px;
    margin-left: 40px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
    padding: 30px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    align-items: center;
}

header * {
    display: inline;
}

header li {
    margin: 20px;
}

header li a {
    color: black;
    text-decoration: none;
}
Enter fullscreen mode Exit fullscreen mode

Result:
There we are, the logo spacing looks better now
Much more aesthetically pleasing! 😘

Okay, this is the last thing for today, and it's very cool. We're going to add a shadow to our navigation bar. What? A shadow? I thought that was stuff that you could only do in Photoshop???

Well, believe it or not, CSS has its own way of making shadows - in fact, multiple ways! In another article, I'll be going through all the different types of CSS shadows in more depth.

For the moment, we'll be using the box-shadow property. It simply creates a rectangular shadow around an element.

Here is the syntax for the box-shadow property:
box-shadow: {x-offset} {y-offset} {blur} {spread}

The x-offset and y-offset are how far to the side and up/down the shadow is, blur is how blurred the shadow is, and spread is how far out of the element the shadow spreads. All of these values can be negative, except for blur. Afterwards, we have the color that we want the shadow to be. Let's add a very simple (but effective) shadow to our nav-bar:

header img {
    height: 80px;
    margin-left: 40px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
    padding: 30px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 25px 0 black;
}

header * {
    display: inline;
}

header li {
    margin: 20px;
}

header li a {
    color: black;
    text-decoration: none;
}
Enter fullscreen mode Exit fullscreen mode

As you can see, we're really only using the blur here - we are setting rest of the values (x-offset, y-offset and spread) to 0. Here is the result:
The nav-bar now has a shadow!

Awesome!!! Our navigation bar now has a shadow!!! 🎉

That's it for today 😉

Conclusion

So, I hope you learned a lot in this article! Now you can go forth and make your own navigations bars. They are used by almost every website you visit, so are a very important thing to know how to code.

In future, I'll be writing a tutorial on how to style a responsive navigation bar, meaning that it will adapt to different screen sizes (eg. show a 'menu' icon on mobile).

In the meantime, I'd really love it if you shared this or subscribed to the newsletter to receive new posts in your inbox. If you do either of those things, you are awesome and I will give you a lifetime supply of tacos 🌮 (not really, just my new marketing tactic 😜 ).

Have fun, keep coding and I'll see you next time, where I'll be talking about website icons in HTML (I thought I'd change it up a bit and do an HTML one). See you then!

Want more posts like this? Sign up to my newsletter.

I've worked hard on these tutorials and as of now do not make any money on them, so I'd really appreciate if you signed up ;)

This article was originally published at Code The Web, a fun and easy-to-understand blog to help you learn web development 🚀
Learn: HTML | CSS | JavaScript

Top comments (0)

Read next

prince_beec5ccde00b7c6c73 profile image

Diwali animation using html ,css and javascript https://www.instagram.com/webstreet_code/

Prince -

emregursanc profile image

What is SEO (Search Engine Optimization)?

Emre Gürsanç -

goodylili profile image

OAuth Tutorial with Go and the Spotify API

Ukeje Chukwuemeriwo Goodness -

oliverbennet profile image

I Started Learning Docker a Year Ago, Now I make my Own Containers.

Oliver Bennet -