My test page has two navigation menus: a primary nav (main > blue) and a secondary nav (mega > red). Both navs are in the and are replaced by the mobile button that expands both menus from the side at 100vh.
As they are placed under the logo, I added some space above them, but now they add taht space beneath the footer, and whateever I try, I cannot seem to get rid of that space. I tried with the calc function > .nav-mega-menu {height: calc(100% - 100px);} but that doesn’t seem to work eighter.
Does anyone know how I can get rid of the extra space beneath the footer?
Ideally, I’d like to make the bar with both hamburger menus ‘sticky’, so that only the logo scrolls away, but the bar remains at the top. However, I prefer to leave the navbars in the . Is this possible?
Thank you very much Woohoo for your reply. I’ve tried your suggestion, but that made the whole page fixed (nothing moved anymore). I’m not sure if the problem is 100vh with iOS, as the main navbar is not adding any space below the footer. You can see this in the link below of the actual project.
I think it must have someting to do with the fact that the secondary navbar is under the primary navbar in the document flow. Cause when I switch them, the added space is gone. I tried al sorts of negative spacing, but nothing seems te do the trick.
The four days that I’ve been searching for a solution haven’t lead to anything, so I would be most grateful if someone out there knows how to fix this.
