W3.CSS Navigation Bar ClassesW3.CSS provides the following classes for navigation bars: Show
Basic NavigationThe w3-bar class is a container for displaying HTML elements horizontally. The w3-bar-item class defines the container elements. It is a perfect tool for creating navigation bars: Example<div class="w3-bar w3-black"> Try It Yourself » Responsive NavigationThe w3-mobile class makes any bar elements responsive (horizontal on large screens and vertical on small). Medium and large screens: Example<div class="w3-bar w3-black"> Try It Yourself » Colored Navigation BarsUse a w3-color class to add a color to the navigation bar: Example<div class="w3-bar w3-light-grey"> Try It Yourself » Bordered Navigation BarsUse a w3-border or w3-card class to add borders around the navigation bar, or to display it as a card: Example<div class="w3-bar w3-border w3-light-grey"> Try It Yourself » Active/Current LinkAdd a w3-color class to a link to highlight it: Example<div class="w3-bar w3-border w3-light-grey"> Try It Yourself » Hoverable LinksWhen you mouse over a button, the background color will change to grey. If you want a different background color on hover, use any of the w3-hover-color classes: Example<div class="w3-bar w3-border w3-light-grey"> Try It Yourself » If you want to change the text color instead, turn off the default hover effect with the w3-hover-none class, and add a w3-hover-text class. Example<div class="w3-bar w3-border w3-black"> Try It Yourself » Spend some time to play around with different hover effects: Example<div class="w3-bar"> Try It Yourself » Right-Aligned LinksUse the w3-right class on a list item to right-align a specific link: Example<div class="w3-bar w3-border w3-light-grey"> Try It Yourself » Navigation Bar SizeUse a w3-size class to change the font-size of the links inside the navbar: Example<div class="w3-bar w3-green w3-large"> Try It Yourself » Use a w3-padding class to change the padding of each link inside the navbar: Example<div class="w3-bar w3-border w3-green"> Try It Yourself » Note: You can also add padding to the navigation bar, instead of each button. However, if you do this, note that the links do not get full padding on hover: Customize the width of the links with the CSS width property (Note: Use w3-mobile to transform the links to 100% width on small screens): Example<div class="w3-bar w3-dark-grey"> Try It Yourself » Navigation Bar with IconsExample<div class="w3-bar w3-light-grey
w3-border"> Try It Yourself » The "fa fa" classes in the example above display "Font Awesome" icons. Learn more about how to display icons in the chapter W3.CSS Icons. Navigation Bar TextIf you want text instead of buttons inside the navigation bar, use the w3-bar-item class to get the same padding as the buttons. Example<div class="w3-bar w3-black"> Try It Yourself » Navbar with Inputs and ButtonsExample<div class="w3-bar w3-light-grey"> Try It Yourself » Navigation Bar with DropdownMove the mouse over the "Dropdown" link: Example<div
class="w3-bar w3-light-grey"> Try It Yourself » Clickable DropdownUse w3-dropdown-click if you prefer to click on the dropdown link instead of hover: Example<div class="w3-dropdown-click"> Try It Yourself » Horizontal Dropdown MenuRemove the w3-bar-block class from the dropdown container if you want the dropdown links to display horizontally instead of vertically: Example<div
class="w3-bar w3-light-grey"> Try It Yourself » Responsive Navbar with Responsive DropdownUse the w3-mobile class on all links including the dropdown container to create a responsive navbar with responsive dropdown links. Resize the browser window to see the effect: Example<div class="w3-bar w3-black"> Try It Yourself » Fixed Navigation BarTo force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the bar and add the w3-top or w3-bottom class: Fixed Top<div class="w3-top"> Try it Yourself » Fixed Bottom<div class="w3-bottom"> Try it Yourself » Vertical Navigation BarThe w3-bar-block class is a container for displaying HTML elements vertically. Example<div class="w3-bar-block w3-black"> Try It Yourself » Collapsing the Navigation BarWhen the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you can use hide and show classes on specific links in the navigation bar. In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the links in the navigation bar will vertically stack: Side NavigationThe w3-sidebar class creates a side navigation: Go to the next chapter to learn more about the side navigation. |