CSS-based header/menu for Basic Grid 2.0.
After the revamp of Basic Grid to utilize CSS Grid, I wanted to update this header and menu system to pull away from the old logic of containers and floats. I wanted to see what I could improve by using CSS Grid, and if I could make this header and navigation more independent of the rest of the framework, thus anyone could just grab and use this with whatever scenario they are building.
I painstakingly examined every aspect of the 1.0 version of the menu, looking for where I could implement CSS Grid in place of the old system. I removed the container class and made header into a 12-column grid, and then set up headerLeft and headerRight as divs within the grid.
I had looked into the inner workings to see if the absolute positioning I used for the toggle button and menu could be better optimized with CSS Grid, but decided against it. The button is more of a stylized item, and absolute positioning worked better for placement and build. In terms of the menu, I’m a big fan of semantics, and did not want to take the menu out of being an unordered list. Converting the list elements to divs would allow me to use grid, but it would kill the semantics of it being a menu, so I decided to leave it as is.
The new header and menu system works as great as the 1.0 version, but with no dependency on an outside grid system to make it work. This is a menu anyone can grab and use in whatever setup they might be implementing.
One issue did have is that I could not make a fixed-position header like I did before, as using position: fixed would remove it from the CSS Grid. However, a new position property, sticky, will allow this header and menu to be fixed. At the time of this writing, I feel that there isn’t enough browser support for me to recommend it, but I guarantee as support increases, it will become part of this build.