Skip to content
Sign upLog in
← Back to Community
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.

Voters
Profile icon
shauryasehgal2
Profile icon
xfinnbar
Comments
hotnewtop
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.