How can I make mobiki's navigation bars non-fixed?
The actual CSS/HTML layout of mobiki is focussed on textual content and good mobile usability, especially regarding the fixed navigation bars. But maybe, you plan to do a completely different thing with it.
Let's the bars float
If you would like to make use of mobiki in a more traditional way or want a more traditional web layout, the first thing would be to get rid of the fixed positioned navigation bars on the top and bottom. For this you just have to remove a couple of settings in the template.css file:
- Remove position:fixed from the nav settings to make re-integrate the navigation bars into the page layout
- Remove the min-height:100%; from the body settings to let the article be just shown as long, as it is — followed by the bottom navigation bar
- Set the body's margin settings to margin:0px auto; — this extra space on top and bottom was just needed to prevent the text beeing overlapped by the navigation bars.
The adapted CSS
The result would be like this:
body { max-width:200mm; margin:0px auto; background-color:#FFF; }
nav { background:linear-gradient(to left,#EEE 0%,#999 100%); padding:5px 5px; overflow: auto; height:39px; width:100%; margin:0 auto; }