This page demonstrates how we can create a navigation bar using CSS. For more examples, see https://www.w3schools.com/css/css_navbar.asp

Start with an unordered list, with no styles


To get a horizontal style, remove bullets and use an inline-block display 

  ul.horizontal li {
    list-style-type: none;
    display:inline-block;
  }


For a navbar style, add padding to links and change color 


  /* remove margin and padding and color the navbar */
  ul.navbar {
    margin: 0;
    padding: 0;	
    background-color: rgb(0, 38, 73);    
  }

  /* style the navbar list items */
  ul.navbar li {
    list-style-type: none;
    display:inline-block;	
  }

  /* add padding and formatting to list item links */
  ul.navbar li a {			
    display:block;
    padding: 14px 16px;
    color:white;
    text-align:center;
    text-decoration: none;
  }  

  /* change link background color on hover */
  ul.navbar li a:hover {
    background-color: rgb(124,33,40); 
  }