CSS Navbar

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

CSS Navigation Bar

Using CSS can transform HTML menus into great-looking navigation bars.

Navigation Bar = List of Links

A navigation bar requires standard HTML as a base.

In the examples, the navigation bar is built from a standard HTML list.

A navigation bar is a list of links, therefore the <ul> and <li> elements is used:

HTML
				
					<p>CSS Menu</p>
<ul>
  <li><a 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>

Output

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

Output

navbar css

Example explained

  • list-style-type: none; the bullets are removed. A navigation bar does not require list markers.
  • Set margin: 0; and padding: 0;  browser default settings are removed.