Navigation bar using HTML & CSS

  • Post author:
  • Post comments:0 Comments
  • Reading time:71 mins read

Embark on a creative journey into web design as we guide you through the process of crafting a stylish and functional navigation bar using HTML and CSS. In this project, you’ll learn the art of creating an elegant and user-friendly navigation menu for your website.

Whether you’re a beginner seeking to understand web development or a designer looking to enhance your skills, this step-by-step guide will provide you with the fundamentals of HTML and CSS to build an impressive navigation bar. Join us in exploring the world of web navigation, where form meets function in an eye-catching display!


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Menu Bar</title>
    <link rel="stylesheet" href="style.css" />

      <label for="" class="logo">Ideasorblogs.</label>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">Blogs</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About us</a></li>



* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
body {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
nav {
  background-color: #333;
  height: 80px;
  padding: 0 5%;
label.logo {
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  margin: 0 100px;
  cursor: pointer;
  line-height: 80px;
nav ul {
  float: right;
  margin-right: 40px;
nav ul li {
  display: inline-block;
  margin: 0 20px;
  line-height: 80px;
nav ul li a {
  color: #fff;
  font-size: 18px;
  padding: 7px;
  text-align: center;
  border-radius: 3px;
  text-transform: uppercase;
  position: relative;
  transition: 0.8s;
nav ul li a::before {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  width: 0;
  height: 3px;
  transition: 0.8s;
a:hover::before, {
  content: "";
  width: 100%;
  height: 3px;
  background-color: #fff;
a:hover, {
  background-color: #666;
Latest posts by Publisher (see all)


Publisher @ideasorblogs

Leave a Reply