Home/ Questions/Q 8391611
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T19:18:36+00:00

I’m trying to implement a fixed navbar in my app and I’m have an

  • 0

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:

enter image description here

It is supposed to look like this:

enter image description here

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 -->​
    • 0