Skip to content

Instantly share code, notes, and snippets.

@acidtone
Last active January 25, 2021 15:33
Show Gist options
  • Save acidtone/10816649ab5d19c607c8a36690f7f2fe to your computer and use it in GitHub Desktop.
Save acidtone/10816649ab5d19c607c8a36690f7f2fe to your computer and use it in GitHub Desktop.
Navigation list: horizontal - full width

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
  2. CSS Selectors:
  3. Flexbox:

See also

<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>
/* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment