Home/ Questions/Q 6834815
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T23:09:28+00:00

I have a jQM application that uses the header as a navigation bar. The

  • 0

I have a jQM application that uses the header as a navigation bar. The problem I’m having is that the page transitions (specifically slide) move the header along with the content as one “page”. I’m looking for a way to keep the header static during page transitions.

I’ve checked the API and can’t seem to find anything. Has anyone figured out a way to accomplish this? Is it even possible with jQM?

Any help would be appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You will need to build your own header that is not part of a <div data-role="page"> element. Generally you add your header/footer as a child of the <div data-role="page"> element but that makes them transition with the rest of the page.

    To remove the header from transitions you can absolutely position your custom header at the top of the page and then add padding to the data-role="content" div elements so the header does not hide any content.

    <style>
#my_header {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 50px;
    z-index  : 1000;
    overflow : hidden;
}
[data-role="content"] {
    padding-top : 50px;
}
</style>
<body>
    <div data-role="page">...</div>
    <div id="my_header">...</div>
</body>
<!-- Notice the header div is not nested within any data-role="page" divs -->

    I haven’t tested this but I do something similar for site-wide menus and it works great. The pages should transition behind the header and the header should stay in-place.

    • 0