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:

  1. Remove position:fixed from the nav settings to make re-integrate the navigation bars into the page layout
  2. 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
  3. 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;
}