Learn to Code via Tutorials on Repl.it!

← Back to all posts
How to create a navbar in HTML and CSS
h
xfinnbar (84)

Disclaimer

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

End result

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.

Comments
hotnewtop
DynamicSquid (4932)

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

xfinnbar (84)

@DynamicSquid Good idea, I will next time.