A web site's navigation is vitally important. It is how people navigate around your web site quickly and easily. A common practice is to also add contact details or a search text box in the navigation too. This allows people to quickly search or get in contact with you, and it is visible on every page.
When you have a relatively small web site with only a handful of pages, the navigation bar can be simple and uncluttered. But when you add more and more pages, things get a little more hectic. Do you reduce the spacing between your navigation items to fit them all in horizontally? Or do you use a dropdown menu system that gives you a second level of menu items. These are great ideas but they come with their own problems too. Then what do you do at smaller screen sizes? How does your navigation look on a mobile or tablet device?
I have previously built a full-screen menu which is one way to resolve this problem. This solution, however, is entirely CSS and uses the power of flexbox.
The basic premise behind this solution is using flexbox to change the order of elements based on breakpoints (screen size). For example, the image above shows a navigation as it appears on a wide desktop screen. But when you are viewing on a smaller screen, there is not enough horizontal room for the navigation items, so we need to collapse the navigation and bring in the "hamburger" menu.
The tricky thing here though is how to show and hide navigation items based on the hamburger menu state. If it has been clicked, we want to show the hidden items and show a close icon instead of the hamburger. If the menu is closed, we want to hide the items again and return the icon to the hamburger state.
Well I have done that using a checkbox and label. The hamburger icon is in a label which is bound to a checkbox. Then depending on the state of the checkbox, I apply styles to the necessary elements. Quite simple really.
Check out the codepen for the full solution.