HTML Tutorial
Horizontal CSS Navigation Bar
Web Template » Horizontal CSS Navigation Bar
The horizontal bar design is great for a minimalistic look and works well to give the user a simple navigation interface. Let's imagine that we are building an horizontal navbar and we want it to take the entire width of the screen.
How to create Horizontal CSS Navigation Bar - examples
A navigation bar is one of the main components of a website, in my opinion the most important one, it is in fact the first section that the user sees when he/she enter a website and it links to the other main parts. Example template with header, three columns and a base, for desktop, tablet and smartphone - mobile.
You will be able to build your site as a professional, without technical or coding knowledge! ... Choose a template created by a designer or create a Horizontal CSS HTML Navigation Bar from scratch.
Example:
Example, How to create Horizontal CSS Navigation Bar - examples:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Example:
Example, How to create Horizontal CSS Navigation Bar - examples:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.active {
background-color: #4CAF50;
color: white;
}
li {
border-bottom: 1px solid #555;
display: inline;
}
</style>
</head>
<body>
<ul>
<li><a href = "#home">Home</a></li>
<li><a href = "#company" class = "active">Company</a></li>
<li><a href = "#product">Product</a></li>
<li><a href = "#services">Services</a></li>
<li><a href = "#contact">Contact</a></li>
</ul>
</body>
</html>
horizontal css navigation bar, HTML, css navigation bar, bar example, tabs, hover, arrows, sidebar
Horizontal CSS Navigation Bar - css menu
Online Editor
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
HTML Templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
CSS HTML Layout
Find here examples of creative and unique website layouts.
Free CSS HTML Menu
Find here examples of creative and unique website CSS HTML menu.