Button Floating When Toggling Header Jquery Mobile - jquery-mobile

Question

I am trying to add a home button to the right of my header. I am also hiding a toolbar behind the header. Now when adding a home button to the header, its wont stay fixed on the header when toggling.
<div data-role="header">
<div data-role="navbar">
<ul>
<li>Settings
</li>
<li>Whatever
</li>
</ul>
</div>
<!-- /navbar -->
<h1>Hide the Toolbar</h1>
<a href="#Home" data-role="button" data-icon="home" data-iconshadow="false"
data-direction="reverse" onclick="empty()" data-transition="slide"
data-iconpos="notext" class="ui-btn-right">home</a>
</div>
<!-- /header -->
$(document).bind('pageinit', function (event) {
loadHomePage();
$("#HomeHeader").on("click", function () {
$("#navMainToolbar").slideToggle(200);
});
$("#navMainToolbar").on("click", function (e) {
e.stopPropagation();
});
});
Here is a demo of the issue.

Answer 1

You need to move the navbar outside of the header:
<div data-role="page">
<div data-role="navbar">
<ul>
<li>Settings
</li>
<li>Whatever
</li>
</ul>
</div>
<!-- /navbar -->
<div data-role="header">
<h1>Hide the Toolbar</h1>
<a href="#Home" data-role="button" data-icon="home" data-iconshadow="false"
data-direction="reverse" onclick="empty()" data-transition="slide" data-iconpos="notext"
class="ui-btn-right">home</a>
</div>
<!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div>
<!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page -->
Example:
http://jsfiddle.net/DMUwp/11/