Mobile Nav Steps

README.md

Mobile Navigation

This is a set of steps for making a vertical mobile navigation. This is a simple implementation that can be extended and expanded on using javascript or a checkbox hack.

• Review this codepen for a working example of this navigation design
• Important this example uses almost no classes to keep it simple. you should be using classes in your code otherwise your header bar styles will dictate all other uses of these same tags throughout your page.

Steps

1. Create your header bar and nav in html

<header>
  <div class="logo">
  <!-- Put logo in link here -->
  </div>
  <nav>
    <ul>
      <!-- add links in list items here -->
    </ul>
  </nav>
</header>

2. Set up your default styles

   • ie: flexbox, color, font-size...
   • header used for basic topbar design
   • .logo used to style how the home logo will work
   • nav controls positioning of the links from pov of header
   • ul controls how the links are distributed
   • li extended link design
   • a direct link design

3. Create a media query breakpoint for when you want your mobile menu to change

@media screen and (max-width: 450px) {
  <!-- Anything that changes for mobile design goes here -->
}

4. Configure your mobile menu

   • Underlying logic of this method:
     • move the nav underneath everything else in the header
     • change nav background color so the header still appears the same
     • make the links easily clickable/hoverable blocks
   • benefits:
     • easy switch between styles
     • can be easily extended with js so that it slides down from the topbar
   • constraints:
     • adding more direct children to the header will break the design without extra work

<!-- inside media query -->
header {
  flex-direction: column;
  align-items: center;
}
.logo {
  align-self: flex-start;
}
nav {
  /* color is dependent on your design */
  background-color: whitesmoke;
  color: black;
  width: 100%
  /* this just creates some separation from rest of content */
  box-shadow: 0 3px 10px black;
}
ul {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}
/* Depending on your design, you may want more styling on the li elements to */
a {
  padding: 1rem 0;
  border-bottom: 1px solid black;
}
a:hover {
  background-color: red;
}