How To Create A Simple Navigation Bar Using Only HTML and CSS?


STEP 1:

Add a ul tag and inside it add li tag. Inside li tag add a tag with the Name.

HTML 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>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="header"><h1>SmartTechTip</h1></div>
<ul>
  <li><a href="">Home</a></li>
  <li><a href="">HTML</a></li>
  <li><a href="">CSS</a></li>
  <li><a href="">JS</a></li>
  <li><a href="">About</a></li>
</ul>
</div>
</body>
</html>


STEP 2:

Add this CSS Code.
*{
    margin:0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.header{
    height: 200px;
    background-color: rgb(43, 43, 43);

}
h1{
    text-align: center;
    position: relative;
    top: 80px;
    font-size: 50px;
    color:white;
}
ul{
    list-style-type: none;
    margin:0;
    padding: 20px;
    background-color: black;
}
li{
    display:inline;

}
li a{
    text-decoration: none;
    padding: 20px 20px;
color:rgb(255, 255, 255);
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
a:hover{
    background-color: rgb(255, 255, 255);
    color:black;

}


Output




Trending Posts

What Are The Use of Function Keys F1 to F12 on The Keyboard?

5 Awesome Computer Shortcut Key Tricks You Must Try

How To Insert JavaScript in HTML?

Why iPhones Don't Have Memory Card Slots?

Why Do All Celebrities Use iPhones?

12MP vs 48MP vs 64MP vs 108MP | Does More Megapixel Equal Better Image Quality?

How To Take Screenshot On HP, Dell, Asus Laptop And PC?

How To Insert CSS into an HTML document?

5 Websites To Increase Your Typing Speed

Computer Memory Measurement Units Chart