Skip to content
Sign upLog in
How to create a navbar in HTML and CSS
Profile icon
xfinnbar

Disclaimer

This is NOT a tutorial on how to learn HTML, CSS and JS and requires a brief understanding of them.

End result

image

Get started: HTML

First, create a HTML, CSS, JS repl or use a webserver of your choice. Next, open the HTML file. Type ! and then press tab to fill out a basic HTML boilerplate. In the body of the document, add a main tag and place any content of the page inside it, like so.

<main> <h1>Example header.</h1> <p>Example content. dfhgglllgjcghkgjlghljhjhujgfjguyjgjjljglfuogltfulgyijl</p> </main>

Next, we'll create a nav with some divs inside:

<nav> <div class="left_navbar nav_element"> Content in the left side of the navbar eg. a logo </div> <div class="right_navbar nav_element"> <a href="https://replit.com">Some links</a> </div> </nav>

That's all the HTML we'll be needing!

The juicy bit: CSS

The CSS is the most important part of building a navbar. First, we'll begin by styling the main and removing the browser default margin from the body. I'll comment in the CSS to help you understand.

<style> body { margin: 0; } main { margin-top: 10vh; /* Making room for the navbar */ } </style>

Now that we've finished setting things up, we can move on to the navbar itself.

<style> /* Put this after all the stuff we did before, in the same style tag. */ :root { --accent-color: hsl(157, 100%, 50%); } nav { position: fixed; /* makes the element always show, even when it is scrolled past. */ top: 0; /* Move it to the top */ left: 0; /* Move it to the left */ width: 100vw; /* Make it fill the x axis */ height: 10vh; /* Make it take up the same amount of height as we set on the main element */ display: flex; /* Allow us to position child elements more easily */ justify-content: space-around; /* Make the child elements sit nicely along the x axis */ align-items: center; /* Make everything centered along the y axis */ background-color: var(--accent-color); /* Reference to the accent-color variable we set in :root */ box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%); /* Add Google's fancy looking shadow. Credit: material.io */ } </style>

Final notes

If you have any issue understanding this tutorial or find an issue with it, please comment it below and I'll be happy to help.

You are viewing a single comment. View All
Profile icon
DynamicSquid

Nice! Could you also link a repl with the code so people can better see the final result?

Profile icon
xfinnbar

@DynamicSquid
Good idea, I will next time.