x
<html><title>W3.CSS</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="4/w3.css"><body><div class="w3-container"><h2>Navigation Bar Sizes</h2><p>Add the w3-small, w3-large, w3-xlarge or w3-xxlarge to change the size of the navigation (will change the font-size of each link).</p><p>Default:</p><div class="w3-bar w3-border w3-green"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a></div><p>w3-large:</p><div class="w3-bar w3-border w3-green w3-large"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a></div><p>w3-xlarge:</p><div class="w3-bar w3-border w3-green w3-xlarge"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a></div><p>w3-xxlarge:</p><div class="w3-bar w3-border w3-green w3-xxlarge"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a></div><p>If you want more space between each link, instead of increasing the font-size, you could add a w3-padding-classes to each link:</p><div class="w3-bar w3-border w3-green"> <a href="#" class="w3-bar-item w3-button w3-padding-16">Home</a> <a href="#" class="w3-bar-item w3-button w3-padding-16">Link 1</a>