 Menu  Bootcamps Spaces Sign Up Log in

Dark mode
Dark code
 HTML CSS JAVASCRIPT   

How TO - Top Navigation

❮ Previous Next ❯

Learn how to create a top navigation bar with CSS.

Top Navigation Bar

Home News Contact

Try it Yourself »

Create A Top Navigation Bar

Step 1) Add HTML:

Example

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>
Step 2) Add CSS:
 Menu  Bootcamps Spaces Sign Up Log in
Dark mode
Dark code
 HTML CSS JAVASCRIPT   
Example
/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

Try it Yourself »

Tip: To create mobile-friendly, responsive navigation bars, read our How To - Responsive Top
Navigation tutorial.

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a
template, and host it for free.
 for free ❯
Get started
Menu  Bootcamps Spaces Sign Up Log in
Dark mode
* no credit card required Dark code
 HTML CSS JAVASCRIPT   

❮ Previous Next ❯

ADVERTISEMENT

COLOR PICKER

  
 Menu  Bootcamps Spaces Sign Up Log in
Dark mode
Dark code
 HTML CSS JAVASCRIPT   

ADVERTISEMENT

SMAJAYU Tractor
GPS Guidance
Systems

SMAJAYU JY100 Tractor GPS Guidance

System for Precision Agriculture, Navigatio…
$
1,150 00

Spaces
 Menu  Upgrade
Bootcamps Spaces Sign Up Log in
Dark mode
Newsletter Dark code
 HTML CSS JAVASCRIPT   

Get Certified

Report Error

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples

Get Certified
 HTML Certificate

 Menu  Bootcamps
CSS Certificate
JavaScript Certificate
Spaces Sign Up Log in
Dark mode
Front End Certificate Dark code
 HTML CSS JAVASCRIPT   
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate

FORUM | ABOUT

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials,
references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.

W3Schools is Powered by W3.CSS.