<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/lib/w3.css">
<body class="w3-container">
<h2>Navigation Bar Sizes</h2>
<p>Customize the width of the list items with the width property (Note: on smaller screens, they will transform to 100%):</p>
<p>Default with two items:</p>
<ul class="w3-navbar w3-border w3-light-grey">
<li><a class="w3-green" href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
<p>Two items, customized:</p>
<ul class="w3-navbar w3-border w3-light-grey">
<li style="width:50%"><a class="w3-green" href="#">Link 1</a></li>
<li style="width:50%"><a href="#">Link 2</a></li>
</ul>
<p>Two items <strong>centered:</strong></p>
<ul class="w3-navbar w3-border w3-light-grey w3-center">
<li style="width:50%"><a class="w3-green" href="#">Link 1</a></li>
<li style="width:50%"><a href="#">Link 2</a></li>
</ul>
<p>Three items:</p>
<ul class="w3-navbar w3-border w3-light-grey">
<li style="width:33.33%"><a class="w3-green" href="#">Link 1</a></li>
<li style="width:33.33%"><a href="#">Link 2</a></li>
<li style="width:33.33%"><a href="#">Link 3</a></li>
</ul>
<p>Three items <strong>centered:</strong></p>
<ul class="w3-navbar w3-border w3-light-grey w3-center">
<li style="width:33.33%"><a class="w3-green" href="#">Link 1</a></li>
<li style="width:33.33%"><a href="#">Link 2</a></li>
<li style="width:33.33%"><a href="#">Link 3</a></li>
</ul>
<p>Four items:</p>
<ul class="w3-navbar w3-border w3-light-grey w3-center">
<li style="width:25%"><a class="w3-green" href="#">Link 1</a></li>
<li style="width:25%"><a href="#">Link 2</a></li>
<li style="width:25%"><a href="#">Link 3</a></li>
<li style="width:25%"><a href="#">Link 4</a></li>
</ul>
<p>Five items:</p>
<ul class="w3-navbar w3-border w3-light-grey w3-center">
<li style="width:20%"><a class="w3-green" href="#">Link 1</a></li>
<li style="width:20%"><a href="#">Link 2</a></li>
<li style="width:20%"><a href="#">Link 3</a></li>
<li style="width:20%"><a href="#">Link 4</a></li>
<li style="width:20%"><a href="#">Link 5</a></li>
</ul>
<p>Six items:</p>
<ul class="w3-navbar w3-border w3-light-grey w3-center">
<li style="width:16.66%"><a class="w3-green" href="#">Link 1</a></li>
<li style="width:16.66%"><a href="#">Link 2</a></li>
<li style="width:16.66%"><a href="#">Link 3</a></li>
<li style="width:16.66%"><a href="#">Link 4</a></li>
<li style="width:16.66%"><a href="#">Link 5</a></li>
<li style="width:16.66%"><a href="#">Link 6</a></li>
</ul>
<p>Other examples:</p>
<ul class="w3-navbar w3-border w3-light-grey w3-center">
<li style="width:50%"><a href="#" class="w3-green">Link</a></li>
<li style="width:12.5%"><a href="#">Link</a></li>
<li style="width:12.5%"><a href="#">Link</a></li>
<li style="width:12.5%"><a href="#">Link</a></li>
<li style="width:12.5%"><a href="#">Link</a></li>
</ul>
<br>
<ul class="w3-navbar w3-border w3-light-grey w3-center">
<li style="width:16.66%"><a href="#">Link</a></li>
<li style="width:66.66%"><a href="#" class="w3-green">Link</a></li>
<li style="width:16.66%"><a href="#">Link</a></li>
</ul>
<br>
<ul class="w3-navbar w3-border w3-light-grey w3-center">
<li style="width:16.66%" class="w3-hide-small"> </li>
<li style="width:16.66%"><a href="#">Link</a></li>
<li style="width:16.66%"><a href="#" class="w3-green">Link</a></li>
<li style="width:16.66%"><a href="#">Link</a></li>
<li style="width:16.66%"><a href="#">Link</a></li>
<li style="width:16.66%" class="w3-hide-small"> </li>
</ul>
<br>
</body>
</html>