Learn to Code via Tutorials on Repl.it!

← Back to all posts
A nice navbar tutorial
brokentoken (51)

How to make a navbar

Lets get started

Put this code in your header tags

 <link
      rel="stylesheet"
      href="https://freshclass.netlify.app/css/freshclass.min.css"
    />

Then create a body tag. but add style to it and replace green with any color

<body style="--color: var(--green)">

Then create a '<nav>' tag
then put link with <a href="#"> tag

Finished code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://freshclass.netlify.app/css/freshclass.min.css"
    />
  </head>
  <body style="--color: var(--blue)">
    <nav>
      
 <center>
      <a href="#">
        Link 1
      </a>
    
      <a href="#">
        Link 2
      </a>
     </center>
      
    </nav>
  </body>
</html>

Cheers!

More information at https://freshclass.netlify.app

Comments
hotnewtop
Bookie0 (6031)

Add syntax highlighting to your code blcoks by adding html after the 3 backslashes (`):

 <link
      rel="stylesheet"
      href="https://freshclass.netlify.app/css/freshclass.min.css"
    />

:D