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)

Read next

cp_nandani profile image

Building a Better Monorepo with TypeScript, Turborepo, or Nx

Nandani Sharma -

oculus42 profile image

6 Skills You Need To Read Tech Articles Like a Pro

Samuel Rouse -

witcher_1001 profile image

🌐 SSH Tunneling: Securely Connect to Remote Networks Like a Pro

The Witcher -

outstandingvick profile image

Creating Custom Hooks for Reusable Logic in React

Victor Ogbonna -