BitlearnersA well-designed and functional navigation bar (navbar) is one of the key components of any website. It serves as a roadmap for users, helping them navigate through various pages. A navbar is commonly positioned at the top of a webpage, where it is always visible for users to access key links. In this article, we will explore how to create a visually appealing and functional CSS navigation bar using HTML and CSS. We'll also discuss various techniques to ensure the navbar stays at the top of the page.
You can check out a live demo of this navigation bar and explore its functionality by visiting the preview on CodePen.
The following code snippet demonstrates the creation of a responsive navigation bar with a logo, menu items, and a call-to-action button. Here's the HTML and CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navbar</title>
<style>
body {
background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
height: 100vh;
margin: 0;
padding-top: 10px;
}
.navbar {
display: flex;
background: #fff;
border-radius: 30px;
padding: 10px 20px;
margin: 0 auto;
width: 95%;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
}
.logo {
width: 12rem;
}
.menu {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
.item {
margin: 0 15px;
}
.item a {
text-decoration: none;
color: #333;
font-weight: bold;
}
.item a:hover {
color: #2258c3;
}
button {
background-color: #2258c3;
color: white;
border: none;
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
}
button:hover {
background-color: #fd2df3;
}
</style>
</head>
<body>
<nav class="navbar">
<img
src="https://bitlearners.com/wp-content/uploads/2024/06/BitLearners-logo-1.png"
alt="Logo"
class="logo"
/>
<ul class="menu">
<li class="item"><a href="#">Home</a></li>
<li class="item"><a href="#">About Us</a></li>
<li class="item"><a href="#">Contact Us</a></li>
<li class="item"><a href="#">Blog</a></li>
</ul>
<button type="submit">Call Now</button>
</nav>
</body>
</html>
Breaking Down the Code
Let's take a closer look at how the navbar is created using HTML and CSS.
HTML Structure
The HTML part of the code is straightforward. It consists of a nav element that contains three main components:
- A logo (an image)
- A **menu **list with clickable links (Home, About Us, Contact Us, Blog)
- A **button **that serves as a call to action (Call Now)
- The structure is wrapped inside a element, which acts as a container for the navigation bar.
<nav class="navbar">
<img src="logo-url" alt="Logo" class="logo" />
<ul class="menu">
<li class="item"><a href="#">Home</a></li>
<li class="item"><a href="#">About Us</a></li>
<li class="item"><a href="#">Contact Us</a></li>
<li class="item"><a href="#">Blog</a></li>
</ul>
<button type="submit">Call Now</button>
</nav>
The logo is created using an tag. The menu is an unordered list (
)
that contains list items (
Styling with CSS
The magic happens in the CSS section, where we define the layout and appearance of the navigation bar. Let’s discuss some of the key elements.
Background and Body Styling
The body has a gradient background that transitions from blue (#2258c3) to pink (#fd2df3). The height is set to 100vh (viewport height), which ensures the background fills the entire screen, and there's no margin to avoid unwanted space around the page.
body {
background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
height: 100vh;
margin: 0;
padding-top: 10px;
}
Navbar Styling
The navbar has a white background and rounded corners (border-radius: 30px). The padding and margin create spacing inside and outside the navbar. The display: flex property makes the navbar a flexbox, allowing for the horizontal alignment of its child elements. The justify-content: space-between ensures the logo, menu, and button are evenly spaced.
.navbar {
display: flex;
background: #fff;
border-radius: 30px;
padding: 10px 20px;
margin: 0 auto;
width: 95%;
justify-content: space-between;
align-items: center;
}
Fixing the Navbar to the Top
One of the key functionalities of a navigation bar is to stay at the top of the page while scrolling. To achieve this, we use the position: fixed property. This allows the navbar to remain fixed at the top (top: 0) regardless of scrolling. Additionally, the z-index: 9999 ensures that the navbar is always above other elements on the page.
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
}
Menu Items and Interactivity
The menu items are displayed horizontally using display: flex on the .menu class. The items are given spacing through margin, and each item is styled to remove the default list style and padding. The links within the menu items have no text decorations and are styled with a bold font and dark color.
The hover effect on the links changes the color to match the blue background color (#2258c3), providing a visual cue that the link is interactive.
.menu {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
.item {
margin: 0 15px;
}
.item a {
text-decoration: none;
color: #333;
font-weight: bold;
}
.item a:hover {
color: #2258c3;
}
Button Styling
The button is styled with a blue background (#2258c3), white text, and rounded corners (border-radius: 20px). On hover, the background changes to pink (#fd2df3) to match the gradient in the background.
button {
background-color: #2258c3;
color: white;
border: none;
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
}
button:hover {
background-color: #fd2df3;
}
How to Keep the Navbar Always on Top
To fix the header at the top of the page with CSS, you use the position: fixed property along with top: 0. This ensures the navbar will remain at the top as the user scrolls. Here’s how it’s applied in the code:
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
}
