Navigation Bars

• Common component of web pages
• Shape the way users think about the site
• Several ways to build them
• Flexbox makes building these much easier

Navigation Bars Example - Floats

Navigation Bars Example - List

Better Nav Bar Example

Navigation Bars Example Complete

Follow the link to see a fairly complete navigation bar with internally linked content that includes:

• Full-width nav bar
• Fixed postion on scroll
• Hover state style change
• Borders around all items

New CSS

#nav {
  position: fixed;
  width: 100%;
}

#nav li:first-child {
  border-left: 1px solid #ccc;
}

#nav li a:hover {
  color: #40f;
  background-color: #fff;
}

.section {
  margin-top: 3em;
}

Complete Example HTML

Navigation Bars Example Flexbox

• Flexbox can make laying out a responsive navigation bar much easier

Example Flexbox Navigation

 Previous Lesson Next Lesson 

Outline