Learn CSS: Simple Navigation Bar in CSS | Day 17 |

Visit - www.skyhighes.com

Simple Navigation Bar with CSS
Here's a simple navigation bar with CSS:

HTML:

HTML
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Use code with caution. Learn more
CSS:

CSS
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f1f1f1;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
}

nav li {
display: inline-block;
margin: 0 10px;
}

nav a {
color: #333;
text-decoration: none;
padding: 5px 10px;
}

nav a:hover {
color: #000;
background-color: #ddd;
}
Use code with caution. Learn more
This code will create a horizontal navigation bar with three links: Home, About, and Contact. The navigation bar will be displayed across the full width of the browser window, with the links centered and spaced evenly. Hovering over a link will change its color and background color.

Here are some ways to customize this code:

Change the background color and font color of the navigation bar.
Add a border to the navigation bar.
Change the font family and size of the links.
Add a hover effect to the entire navigation bar.
Use font-awesome icons for the links.
Make the navigation bar responsive to different screen sizes.