There's an old joke that goes something like this:
Q. How do you eat an elephant?
A. One piece at a time.
It's a joke, of course, but a lesson too. Break things down to small pieces. It's a lot easier that way.
A navbar is the same. When you look at the HTML and the CSS as a whole, it's a humongous undertaking. But break it down conceptually and then break down the respective code and you have a more manageable project.
My CSS Blade project needed a few modules: 1) a navbar; 2) a footer; and 3) a contact form.
Here's what I wanted out of a navbar:
- A bar across the top of a website that contained a logo, a menu, and a right section to accommodate a search bar and burger bars (menu trigger).
- A submenu structure with multiple levels (flat)
- A submenu structure, commonly known as "mega menu", single level for any HTML code (as an optional component to the module)
- ... and have both the flat and megamenu submenu structures available at the same time.
- No components of Flexbox to be used (CSS Grid strictly)
It's taken quite some time, but I have it built. The only "real" challenge was making it responsive. I needed to make one of the CSS Grid columns magically disappear on smaller screens ... well, actually, not disappear – but shift its position outside of the CSS Grid layout.
The navbar default is a flat drop down style menu system with multiple levels of menus. That is all contained within a 3,25Kb CSS file. The megamenu extension is contained within a second 1.42Kb CSS file.
It's more thrilling when you consider the navbar default CSS file is based on variables. It's so simple to change the overall background colors, text colors, submenu heights and more.
Did I mention it's tiny too? LOL ... hang in there, I'll release it all soon.