coding

Create Cool Looking Navigation Bar Using HTML and CSS

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);
}

 

Leave a reply

Your email address will not be published. Required fields are marked *

0 %