DEV Community

Cover image for How to create a navbar in 5 minutes
Yigit S
Yigit S

Posted on • Edited on

How to create a navbar in 5 minutes

#css #flexbox #webdev #html

Hi all. In this post, we're creating a navbar in less than 5 minutes.

HTML Code

Inside the <body> tag we create a navbar with the tag <nav>. Under <nav>, we put <ul> and 3 <li> items. Finally, we put our links with # <a href="#about-me> to go to that section on the page. It's something like this:

<nav> <ul> <li><a href="#about-me">About me</a></li> <li><a href="#projects">Projects</a></li> <li><a href="#contact-me">Contact</a></li> </ul> </nav>
Enter fullscreen mode Exit fullscreen mode

CSS Code

In the video, I didn't create a style.css file. I wrote all the css code in <style> tag. Here's the css code.
Body

 body{ margin: 0; padding: 0; background-color: rgb(172, 170, 168); }
Enter fullscreen mode Exit fullscreen mode

Nav bar

 nav { display: flex; align-items: center; justify-content: center; background-color: rgb(28, 29, 37); }
Enter fullscreen mode Exit fullscreen mode

Ul, li and a

 ul { display: flex; list-style-type: none; width: 500px; justify-content: center; font-size: 30px; } li { text-decoration: none; margin-right: 11px; } ul li a{ color: rgb(232, 231, 233); text-decoration: none; } ul li a:hover{ text-decoration: underline; color: rgb(150, 120, 180); }
Enter fullscreen mode Exit fullscreen mode

Here's the final code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nav Bar</title> </head> <body> <nav> <ul> <li><a href="#about-me">About me</a></li> <li><a href="#projects">Projects</a></li> <li><a href="#contact-me">Contact</a></li> </ul> </nav> <style> body{ margin: 0; padding: 0; background-color: rgb(172, 170, 168); } nav { display: flex; align-items: center; justify-content: center; background-color: rgb(28, 29, 37); } ul { display: flex; list-style-type: none; width: 500px; justify-content: center; font-size: 30px; } li { text-decoration: none; margin-right: 11px; } ul li a{ color: rgb(232, 231, 233); text-decoration: none; } ul li a:hover{ text-decoration: underline; color: rgb(150, 120, 180); } </style> </body> </html>
Enter fullscreen mode Exit fullscreen mode

I hope you find this tutorial useful. See you on the next article.
Here's the Source Code on GitHub
Here's the YouTube Video where I code it from scratch.
Check it out on CodePen

Follow me on

Top comments (0)