Recently I've been building a new template for my Troop's website. There is a mobile template built in to the CSS. Part of the mobile template turns the navigation into a slide-in menu on small-screen devices. I would like that menu to slide in with its top aligned with the top of the screen since the controlling "button" is set to position:fixed and slides up and down as the page is scrolled. Except right now the menu slides in aligned with the top of the page.
A couple of things I've tried but didn't like:
- Setting the navigation's position to "fixed", which works but doesn't allow the menu to be scrolled.That would be an issue on shorter screens, or when a device is rotated to landscape.
There's still some work to do on font sizes, colors, mobile break-points, etc. but this is getting close. I'm willing to listen to other suggestions for improvement as well.