Navbar in Header JQuery Mobile

Question

EDIT: My temporary solution is to turn off all transitions and use different id for each header. You then get the persistent toolbar, but without transitions. working example without transitions

I am using a persistent fixed navbar in my header in JQuery Mobile. I'm navigating between 3 html files, and on the first(main) page there is no problem, but on the second and third page the navbar covers some of the content.

example of broken navbar code for the navbar and header:

<div data-role="header" data-id="header" data-position="fixed">
        <h1>Page 1</h1>
        <a href="options.html" data-icon="gear" class="ui-btn-right">Options</a>
        <div data-role="navbar">
            <ul>
                <li><a href="#page1" data-icon="home" data-iconpos="top"class="ui-btn-active ui-state-persist"  >Page1</a></li>
                <li><a href="#page2" data-icon="info" data-iconpos="top"  >Page2</a></li>
                <li><a href="#page3" data-icon="gear" data-iconpos="top" >Page3</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->

I have uploaded an example of the problem here(with pages in one html file instead of three html files) : broken navbar

Answer 1

here's the updated one: http://jsfiddle.net/LvuUX/2/

You had same data-id="header" for all three pages, as you are using multi-page template so you can't have same id for multiple elements

EDIT: http://jsfiddle.net/LvuUX/3/ looks like jQuery is not using the correct padding-top when page loads. To fix this issue you can just use a fix padding-top for your data-role="content"

<style type="text/css">
    .ui-page-header-fixed { padding-top: 5.9em; }
</style>

Answer 2

I think what you're trying to do is similar to the problem I had. I had a fixed positioned navbar but my page content was being hidden underneath it. I solved the problem by applying a top margin to my content div equal to the height of the navbar. (ie. My margin-top of my content div was 50px as that was the height of my navbar.)

Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.

I hope I interpreted your question correctly. I've only been learning html&css 3 months but when I saw your question I thought this might help.