Navigation list: horizontal - full width

README.md

Navigation: Horizontal menu - full width

1. Style menu links

2. Create a flexbox container:

   .container {
     display: flex;
   }

3. Use a wildcard child selector to set flex: auto on all container items.

   .container > * {
     flex: auto;
   }

   This is the same as setting flex: 1 1 auto, which tells the li elements to grow and distribute extra space equally among each item.

Assumptions

Standard html navigation menu:

<nav>
  <ul class="container">
    <li><a href="#">Fighter</a></li>
    <li><a href="#">Wizard</a></li>
    <li><a href="#">Bard</a></li>
    <li><a href="#">Rogue</a></li>
  </ul>
</nav>

Background material

1. HTML
   • The Navigation Section element
2. CSS Selectors:
   • MDN: Child selector
3. Flexbox:
   • MDN: Flexbox basics
   • Reference: Complete Guide to Flexbox
   • Reference: flex property

See also

• Reset list defaults
• Vertical nav menu
• Horizontal nav menu

index.html

<nav>
  <ul class="container">
    <li><a href="#">Fighter</a></li>
    <li><a href="#">Wizard</a></li>
    <li><a href="#">Bard</a></li>
    <li><a href="#">Rogue</a></li>
  </ul>
</nav>

style.css

/* Import a fancy font from Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap');


.container {
  display: flex;
}

.container > * {
  flex: auto;
}

/*********************/
/* Additional styles */
/*********************/

/* Usable links are obviously clickable */
nav a {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: indigo;
}

nav a:hover {
  background-color: papayawhip;
}

nav a:active {
  background-color: indigo;
  color: white;
}

/* Reset browser defaults */

nav ul {
  padding-left: 0;  
}

nav li {
  list-style: none;
}

nav a {
  display: block;
}

/* Make it pretty(ier) */
body {
  
  background-color: lightgrey;
  margin: 0;

  font-family: 'Open Sans Condensed', Arial, Helvetica, sans-serif;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 36px;
}

nav ul {
  border: 1px solid grey;
}

nav li {
  background-color: white;
}

nav a {
  text-align: center;
}