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?

How To Create a Fake Facebook Login Clone Using Only HTML and CSS?

How To Earn Money With Only HTML and CSS Knowledge?

Is TypeScript Frontend or Backend?

Brief History Of Computer

Shield Your Small Business: Must-Have Cybersecurity Strategies

The Secret to Flawless Web Design: Mastering Responsive Layouts

Strengthen Your IT Infrastructure: Scalable Strategies for a Future-Proof Business

Build a Simple Calculator Using HTML, CSS, and JavaScript 💻

What is the Main Goal of Generative AI?