Results and Takeaways
I created three versions of this header and navigation for my needs. The first is a simple setup that scrolls with content, and the second is a fixed position navigation that stays up top as you scroll. I also made a third version specifically for Amanda Neff’s website, where it stays fixed, but on desktop no logo appears at the top until you begin to scroll down. The links shift to the side and the logo appears, as well as disappearing if you happen to scroll back up.
In keeping with what I feel is a better user experience, I made sure to label the button and have said button change from “Menu” to “Close” depending on the state of the navigation. I feel that while hamburger menus can be overlooked by the user when seeking navigation, it’s better to label the button rather than rely on just three lines.
The only complication I can see with this solution is that you still need Basic Grid in order to use it, mainly for the container class and to do a clear fix on the header when you implement it. I did include those minimums in the files, but I’m eventually going to experiment with Flexbox and CSS Grid to see if I can improve on this and make it more independent.