Header Flex Nav

README.md

Header Nav Alternate Design

This gist uses most of the same methods as the Flex Nav Bar. However uses a header as the main bar and uses inline-block styling on the list elements

Header Container

• This is a semantic way to create a complex header bar
• This can be especially useful if you have more than just your navlinks in the top bar
  • Ie: a contact or shopping cart button for modal popups, an email button that opens up the user's default email client...
• This can be an excellent practice for your site structure

List Items - a few ideas

• Instead of styling the ul extensively, you can cut down your code by using inline-block on the li elements
• This remove the need to change the list-style-type
• You will still need display flex and flex wrap if you want the links to not stay static
  • If you want the links to wrap from the right first, you also need to set justify-content: flex-end
• gap is used in this example, it creates space between flex items

Attributions

• Jessica Gust For the idea to use inline-block on the nav list items.

index.html

<header>
  <nav>
    <a href="#">Logo</a>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

style.css

header {
  background-color: black;
}
nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
nav ul {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}
li {
  display: inline-block;
}
li a {
  color: white;
  text-decoration: none;
}
li a:hover {
  color: palevioletred;
}