W3CSS Navigation

Navigation is one of the basic building block of a website. Your website may consists of hundreds of pages. It is extremely important that user can conveniently navigate through your website and easily finds whatever he/she wants. This is where navigation comes into play. Navigation is nothing but a menu that allow user to reach different parts of your website. Usually top navigation menus and side navigation menus are used for navigation purposes. It is very simple to create W3CSS navigation using horizontal and vertical bars we studied in a recent article.

Basic Horizontal W3CSS Navigation

It is very easy to create horizontal navigation W3CSS. You have to create an outer div with class “w3-bar”. For each item in the bar you have to create a div inside the outer div and give it a class of w3-bar-item. You can also add w3-color class to the outer div to give color to a bar. Default is black. Take a look at the following example to see horizontal bars in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-bar w3-teal">
  <a href="#" class="w3-bar-item">Home</a>
 <a href="#" class="w3-bar-item">About</a>
     <a href="#" class="w3-bar-item">Contact</a>
     <a href="#" class="w3-bar-item">Projects</a>
    
</div>


</body>
    
</html>

Download the code Try the code

Responsive Navigation

To create responsive W3CSS navigation, simply add w3-mobile class to each individual item in the navigation. This way on mobile screen, the individual items will take full width of the screen. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-bar w3-teal">
  <a href="#" class="w3-bar-item w3-mobile">Home</a>
 <a href="#" class="w3-bar-item w3-mobile">About</a>
     <a href="#" class="w3-bar-item w3-mobile">Contact</a>
     <a href="#" class="w3-bar-item  w3-mobile">Projects</a>
    
</div>


</body>
    
</html>

Download the code Try the code

Navigation with Borders

You can also create navigation with all the items having borders between them. To do, simply add w3-border-right to all the individual elements. Take a look at the following example:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-bar w3-teal">
  <a href="#" class="w3-bar-item w3-border-right">Home</a>
 <a href="#" class="w3-bar-item w3-border-right">About</a>
     <a href="#" class="w3-bar-item w3-border-right">Contact</a>
     <a href="#" class="w3-bar-item w3-border-right">Projects</a>
    
</div>


</body>
    
</html>

Download the code Try the code

Navigation with Different Sizes

You can create navigation with different sizes. In the parent div use classes w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlarge, w3-xxxlarge and w3-jumbo classes to create navigation of the size you want. The following example demonstrates this concept.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-bar w3-teal w3-large">
  <a href="#" class="w3-bar-item">Home</a>
 <a href="#" class="w3-bar-item">About</a>
     <a href="#" class="w3-bar-item">Contact</a>
     <a href="#" class="w3-bar-item">Projects</a>
    
</div>

    </br>

    <div class="w3-bar w3-teal w3-xlarge">
  <a href="#" class="w3-bar-item">Home</a>
 <a href="#" class="w3-bar-item">About</a>
     <a href="#" class="w3-bar-item">Contact</a>
     <a href="#" class="w3-bar-item">Projects</a>
    
</div>

    </br>
<div class="w3-bar w3-teal w3-xxlarge">
  <a href="#" class="w3-bar-item">Home</a>
 <a href="#" class="w3-bar-item">About</a>
     <a href="#" class="w3-bar-item">Contact</a>
     <a href="#" class="w3-bar-item">Projects</a>
    
</div>

    </br>
</body>
    
</html>

Download the code Try the code

<<< W3CSS DropdownW3CSS Sidebar >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .