Bootstrap and Affixed Nav for mobile.
Recently I have been working on a new website for my primary contract referrer, I decided to use Bootstrap 3.0 as my base and as an absolute necessity it should look nice on all platforms (even mobile). Note that I am part of this group that doesn’t believe that it should look the same on all browsers, platforms and screens, just that it looks nice.
My first issue was quite interesting as I found that my wonderful iPhone’s default browser doesn’t support position: fixed (See http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html for more detail on this). This means that my nice affix plugin using navbar only worked on normal browsers and not on my iPhone. This I decided was not an acceptable solution, so I started googling, then I googled some more and came up fairly blank. Yes there were a couple of bit’s and pieces here and there that hinted it could be done, but nothing that hit all the targets of: Bootstrap 3.0 Affix Navbar.
So cobbling together some other answers I came up with this: http://codepen.io/SimeonC/pen/lhGjC (or http://cdpn.io/lhGjC for without the code frames).
Once you’ve had a look at the example keep reading for the full breakdown.
The demo has 2 main parts to it – the <header> and the <div id=”scroll-wrap”> parts. The HTML is basic, nothing fancy to see there we just place the header element then all our content inside the scroll-wrap element. In the CSS is where the fun starts. As you probably have heard – it’s a bad idea to try change how things are done via browser sniffing as IE 11 for one has started lying about what it is! So to embrace this I design my sites using modernizr and for size of screen rather than type of screen. On smaller screens – to target the iPhones in particular I use media queries to absolutely position the header and then the scroll-wrap for the remaining viewport area. We then use overflow: scroll to make this the scrollable area (Note the use of -webkit-overflow-scrolling: touch this means the div scrolls nicely on my iPhone). Nice thing about this approach is that the menu stays “Fixed” at the top. If you are using this method do keep in mind that the screen is small – the bigger your fixed area the smaller the screen to read on I’d recommend not using up more than 10-15% of the screen height with fixed elements especially if you set user-scalable to no.
Another thing I haven’t demoed here is using bootstraps scrollspy in this situation – a simple solution is to initialise it twice: $(‘body’).scrollspy(); $(‘#scroll-wrap’).scrollspy();. Though not perfect it does get the effect to work as only one scroll event will fire depending on how the CSS has changed the scroll-wrap.
Admittedly this won’t suit everyone and for some if you are fine with an always absolutely positioned navbar (or similar) on smaller devices you won’t need any of this. For those of those it helps – do leave a message, it’s nice to know the views aren’t all spam-bots!!
Reference: For why browser detection is bad: http://css-tricks.com/browser-detection-is-bad/