Flex Nav

README.md

Creating a Simple Nav Bar

This will use flexbox to allow it to be responsive

nav layout

• display: flex; will make your nav element a flex container
  • Especially important if your nav tag has a home icon on the left and a group of links on the right
  • If you are using a ul inside the nav, you will need the ul to also be a nav container
• use nested selectors for clear code
  • nav ul { /* Code Here */ }

List Items

• Lists have:
  • margin by default
  • bullets by default
• You will need to select the ul for some of these settings, possible the li for others

Links

• Change default color
  • color: inherit or setting an explicit color are both good options
  • Make the colors fit your theme
• Change the text-decoration
  • This will get rid of the underline
• flex-wrap can be very useful

Psuedo class :hover

• This has to be set on the a or whatever is actually clickable for predicatable functionality
• If you have text and an image in your logo:
  • Check how the hover is working by making it give background color
    • This will show if your hover is being unpredicatable

Common bugs

• Padding and indendation creating a broken nav
  • check by adding border to everything with
    • * { border: 1px red solid }
    • this easily shows where overflow is occurring
    • if the only thing that's overflowing is this border, then delete it and you're probably good
• Hover isn't working right
  • Check what it's set to
• Logo and text is not being responsive
  • Check how big the container is, it might not be flexing correctly
  • The example in this gist shows a technique that's great for making static icon + home text.
    • this is done to make the hover select smooth, but could be implemented differently for different functionality

Using nav alone or nav inside a header?

• This example is very simple, with the nav being the entire header bar
• Another approach is to make the whole top bar a header and nest a nav inside of it
  • In this approach, you can still have the ul structure in the nav.
  • Or you can just have the links. but remember, that the links are inline by default
• nav by itself is especially nice if you want to make it sticky to the browser window

index.html

<nav>
  <a href="#" class="logo">
    <div>
      <img src="#" alt="Logo">
      <span>Home</span>
    </div>
  </a>
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

style.css

nav {
  background-color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
}
a.logo div {
  width: 100px;
  display: flex;
  align-items: center;
}
a.logo div span {
  margin: 0 10px;
}
nav ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
nav a {
  color: ghostwhite;
}
nav a:hover {
  color: palevioletred;
}