Fixed header navbar issue with jQuery Mobile

Question

I'm trying to implement a fixed navbar in my app and I'm have an issue where the navbar doesn't show up. It seems to appear collapsed, see the following image for reference:

It is supposed to look like this:

Here is the related code I am using:

<div data-role="header" data-id="header" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="index.html" data-role="button" data-icon="b" data-inline="true" data-iconpos="notext" class="ui-btn-right"></a></li>
                    <li><a href="index.html" data-role="button" data-icon="star" data-inline="true" data-iconpos="notext" class="ui-btn-right"></a></li>
                    <li><a href="index.html" data-role="button" data-icon="grid" data-inline="true" data-iconpos="notext" class="ui-btn-right"></a></li>
                    <li><a href="index.html" data-role="button" data-icon="search" data-inline="true" data-iconpos="notext" class="ui-btn-right"></a></li>
                </ul>
            </div><!-- /navbar -->
</div><!-- /header -->

I am able to successfully achieve the 2nd image by implementing the navbar outside of the header block, but I then can't set it to fixed position. I'm certain it isn't any issues with my CSS as I'm using the default theme minus a few color tweaks. Any suggestions?

-- UPDATE --

As requested here is a quick and dirty implementation on jsfiddle .

Answer 1

I removed data-role="button" and class="ui-btn-right" and it made a proper navbar. Links in a navbar are automatically styled as buttons and evenly spaced. Not sure if data-inline="true" is necessary but I left it in. In the navbar I use I don't use it though.

<div data-role="header" data-id="header" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="index.html"  data-icon="b" data-inline="true" data-iconpos="notext"></a></li>
                    <li><a href="index.html"  data-icon="star" data-inline="true" data-iconpos="notext"></a></li>
                    <li><a href="index.html" data-icon="grid" data-inline="true" data-iconpos="notext"></a></li>
                    <li><a href="index.html" data-icon="search" data-inline="true" data-iconpos="notext"></a></li>
                </ul>
            </div><!-- /navbar -->
</div><!-- /header -->​

Answer 2

<div data-role="header">        
    <div data-role="navbar" data-iconpos="bottom">
        <ul>
            <li ><a  data-icon="search" href="#" href="a.html" >One</a></li>
            <li><a  data-icon="search" href="#" href="a.html" >Two</a></li>
            <li><a  data-icon="search" href="#" href="a.html" >Three</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->​

This code works pretty well. http://jsfiddle.net/K6GMG/4/ i dont see any use of using button for a tag since they are already buttons.

but some how when i add this class="ui-btn-right" is breaking the code.