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.
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:wght@500&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);
}
Â
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.
Hello, I enjoy reading all of your article post.
I like to write a little comment to support you.
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!
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!!!