About Lesson
How to create Horizontal Navbar using CSS?
A horizontal navbar, also known as a horizontal navigation bar or simply a “nav bar”, is a common user interface element often found at the top of a webpage. It typically contains links or buttons that allow users to navigate to different sections or pages of a website.
Let’s Create a Card Step By Step:
Write HTML Code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navbar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<a href="#" class="active">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</body>
</html>
Write CSS Code:
1. Resetting Default Margin and Setting Font Family:
CSS
body {
margin: 0;
font-family: Arial, sans-serif;
}margin: 0;: Resets the default margin of the<body>element to 0, removing any default spacing.font-family: Arial, sans-serif;: Sets the default font family for the entire document to Arial, falling back to a generic sans-serif font if Arial is not available.
2. Styling the Navbar Container::
CSS
.navbar {
background-color: #333; /* Background color of the navbar */
position: fixed; /* Fixed position */
top: 0; /* Stick to the top */
width: 100%; /* Full width of the viewport */
overflow: hidden; /* Hide overflow */
}background-color: #333;: Sets the background color of the navbar to a dark gray color (#333).position: fixed;: Fixes the position of the navbar, so it remains in place even when the user scrolls the page.top: 0;: Positions the navbar flush against the top edge of the viewport.width: 100%;: Sets the width of the navbar to 100% of the viewport width, making it span the entire width of the browser window.overflow: hidden;: Hides any content that overflows horizontally, ensuring that no horizontal scrollbar appears.
3. Styling Navbar Links:
CSS
.navbar a {
float: left; /* Float links to the left to create a horizontal layout */
display: block; /* Make the links appear as blocks */
color: white; /* Text color */
text-align: center; /* Center-align text */
padding: 14px 16px; /* Padding for each link */
text-decoration: none; /* Remove underline */
}float: left;: Floats the links to the left to create a horizontal layout.display: block;: Makes the links appear as blocks, causing them to take up the full width of their container and allowing for padding and margins to be applied.color: white;: Sets the text color of the links to white.text-align: center;: Center-aligns the text within each link.padding: 14px 16px;: Adds 14 pixels of padding to the top and bottom, and 16 pixels of padding to the left and right of each link.text-decoration: none;: Removes the underline decoration from the links.
4. Styling Navbar Links on Hover:
CSS
.navbar a:hover {
background-color: #555; /* Darker background color on hover */
}background-color: #555;: Changes the background color of the links to a darker shade of gray (#555) when hovered over.
5. Styling Active Navbar Links:
CSS
.navbar a.active {
background-color: #4CAF50;
}background-color: #4CAF50;: Sets the background color of the active link to a green color (#4CAF50). This would typically be used to indicate the currently selected or active page in the navbar.
Output:
