Create Cool Looking Navigation Bar Using HTML and CSS

Share your love

In this blog, you will be able to create a cool nice looking navigation bar using HTML and CSS. You need to have basic knowledge of HTML and CSS along with flexbox to understand this.

Navigation Bar Using Html and CSS

As the navbar is highly important in a website, it needs to look good to catch the visitor’s views. In this blog, I had made a simple eye-catching navbar. Although this navbar is not responsive, I will update the article once I had made a responsive version of this article.

I had used rem as a unit as rem is recommended for margin, padding, and font size. Remember 1 rem = 16px.

Video tutorials of Navigation Bar

In this video, I had shown a visual way to create a navbar using HTML and CSS. You need to have a basic knowledge of HTML, CSS, and flexbox in order to achieve this.

Navigation Bar Source Code

Below you can get the source code of this project.

<!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" />
    <link rel="stylesheet" href="styles.css" />
    <title>Navbar Design</title>
  </head>
  <body>
    <header>
      <span class="image-clickable">
        <a href="index.html">
          <img src="images/logo-dark.png" alt="main-logo" class="logo" />
        </a>
      </span>
      <nav>
        <ul class="nav-links">
          <li><a href="#">Services</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">About</a></li>
        </ul>
      </nav>
      <a href="#"><button>Contact Us</button></a>
    </header>
  </body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #222831;
}

header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0.5rem 1.5rem;
}

a,
button {
  color: white;
}

.image-clickable {
  margin-right: auto;
}

.logo {
  height: 4.2rem;
  margin-right: auto;
}

.nav-links {
  list-style: none;
}

.nav-links li {
  display: inline-block;
  padding: 0 1.25rem;
}

.nav-links li a {
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  transition: all 0.5s ease 0s;
}

.nav-links li a:hover {
  color: rgba(0, 173, 181, 0.8);
}

button {
  background: #04bd70;
  cursor: pointer;
  padding: 9px 20px;
  border: none;
  border-radius: 50px;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  transition: all 0.5s ease 0s;
  margin-left: 20px;
}

button:hover {
  background: rgba(0, 173, 181, 0.8);
}

 

Share your love
Andraware
Andraware

4 Comments

  1. Attractive section of content. I just stumbled upon your weblog and in accession capital to assert
    that I acquire actually enjoyed account your blog posts. Anyway I’ll be
    subscribing to your augment and even I achievement you access consistently fast.

  2. I was recommended this website by my cousin. I am not
    sure whether this post is written by him as no one else know such
    detailed about my problem. You are incredible!
    Thanks!

  3. Its Pleasure to understand your blog.The above articles is fairly extraordinary, and I extremely enjoyed reading your blog and things that you simply expressed. I really like to appear back on the normal basis,post additional during the topic.Thanks for sharingkeep writing!!!

Leave a Reply

Your email address will not be published.