Vertical Navbar

CSS Vertical Navbar Example

Here, we create a basic vertical navigation bar with a gray background color, and we also change the background color and the text color of the links when the user mouse over them:

• Home
• News
• Contact
• About

Example

ul {
  list-style-type: none;

margin: 0;
  padding: 0;
  width:
200px;
  background-color: #f1f1f1;
}

li a {
  display:
block;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
}

  /* Change the link and background color on hover */
li a:hover {

background-color: #555555;
  color: white;
}

Example explained:

Active State

Now we add an "active" class to highlight the link corresponding to the current page to let the user know which page/section he/she is on:

• Home
• News
• Contact
• About

Example

.active {
  background-color: #04AA6D;

color: white;
}

Center Navbar Links & Add Borders

To center the navbar links, add text-align: center; to

If you want a border around the navbar, add the border property to

.

If you also want borders inside the navbar, add a border-bottom property to all

• elements, except for the last one:
  • Home
  • News
  • Contact
  • About

  Example

  ul {
    border: 1px solid #555555;
  }
  
  li {
    text-align: center;
  
  border-bottom: 1px solid #555555;
  }
  
  li:last-child {
  
  border-bottom: none;
  }
  

  ---

  Full-height Vertical Navbar

  Create a full-height, "sticky" side navigation:

  Example

  ul {
    list-style-type: none;
  
  margin: 0;
    padding: 0;
    width:
    130px;
    background-color: #f1f1f1;
    height: 100%; /* Full height */
  
      position: fixed; /*
  Make it stick, even on scroll */
  
  overflow: auto; /* Enable scrolling if the sidenav has too much content */
  }
  

  Note: This example might not work properly on mobile devices.

  ---

  Responsive Navbar

  Example

  <img alt="Responsive Navbar" src="navbar_responsive_ver.jpg" style="width:100%"/>