The blog header has been the source of some headache for quite some time for me. If you have ever worked on developing one which needs to accommodate different logo sizes, dynamic menu items, etc. you will know that managing all of this while keeping the header to look consistently good and responsive is no mean feat.
With that in mind, I set out to build a progressively responsive header which scales well with no matter the number of menu items and logo sizes.
The idea was to show as many menu items as possible within the space available in the menu and wrap items which do not fit under a drawer menu behind a hamburger icon.
After some insane code-fu, I managed to get the implementation down and this is now it looks transitioning from a large desktop screen to mobile:
Ready to Start Blogging on Notion?
Start your 7 days free trial of Stomod and get up and running with a fast, SEO-optimized blog in minutes!