Premium Only Content

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.
-
LIVE
The Quartering
2 hours agoDaily Wire CIVIL WAR Over Karmelo Anthony, GTA 6 Trailer Drops, Lady Gaga TERROR Attack & More
18,689 watching -
36:53
The Brett Cooper Show
1 day ago $2.91 earnedBill Belichick’s BIZARRE Relationship and Meghan Markle’s Podcast Disaster | Episode 28
5.29K9 -
LIVE
Anthony Rogers
19 hours agoEpisode 365
104 watching -
1:38:28
Russell Brand
2 hours agoHOLY SH*T… Trump ENDS Gain Of Function, Tulsi CONFIRMS Ukraine Bio-Labs! – SF578
121K36 -
21:03
UnchartedX
13 days agoAre the Precision Ancient Stone Vases Modern Fakes? Provenance, and Scanning in the Petrie Museum!
5.07K8 -
LIVE
Barry Cunningham
2 hours agoTRUMP DAILY BRIEFING: CANADA COMES TO KISS THE RING! WESLEY HUNT INTERVIEW!
1,370 watching -
LIVE
Right Side Broadcasting Network
4 hours agoLIVE: Pam Bondi Holds a DOJ Presser, Trump Holds FIFA Task Force Meeting, and More - 5/6/25
2,900 watching -
LIVE
StoneMountain64
1 hour agoWildest Warzone CUSTOM Games
317 watching -
58:13
Sean Unpaved
2 hours agoHoops Shocks, Nature's Wrath, & Number Crunch
18.2K -
1:32:19
Simply Bitcoin
3 hours ago $2.24 earnedCoinbase $400B BITCOIN BACKFLIP CONFIRMS 2025 Is Different! | EP 1238
33.6K1