jquery - ヘッダーの Jquery モバイル ナビゲーション バーのスタイル設定が正しく機能しない

Question

私はCordova/PhoneGapを使用してJqueryモバイルアプリに取り組んでおり、ヘッダーのすぐ下に固定位置のナビゲーションバーが必要なため、ナビゲーションバーはコンテンツとともにスクロールしません。ヘッダー内にナビゲーション バーを配置すると、ヘッダーのスタイルが継承され、ナビゲーション バーの css が正常に動作しません。たとえば、navbar のアイテムをクリックしても強調表示されず、ヘッダー自体と同じ色 (私の場合は黒) のままで、目に見える境界線もありません。アイテム内のテキストのみがクリックに反応します。いくつかの例を調べましたが、どれもうまくいかないようです:
例 1
例 2

ページのコードは次のとおりです。

<div data-role="page" id="page_tasks">
    <div data-role="header" data-id="header" data-theme="b" data-position="fixed">
        <h1>Tasks</h1>
        <a href="#leftmenu" class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-bars"></a>
        <div data-role="navbar">
        <ul>
            <li class="iconnavbar"><a href="#" data-href="overdue">1</a></li>
            <li class="iconnavbar"><a href="#" data-href="today">2</a></li>
            <li class="iconnavbar"><a href="#" data-href="thisweek">3</a></li>
            <li class="iconnavbar"><a href="#" data-href="nextweek">4</a></li>
            <li class="iconnavbar"><a href="#" data-href="later">5</a></li>
            <li class="iconnavbar"><a href="#" data-href="finished">6</a></li>
        </ul>
    </div>
    </div>

    <div data-role="main" class="ui-content">
        <!-- page content, unrelated -->
    </div>
</div>

クラス iconnavbar の CSS は次のとおりです。

.iconnavbar {
 width: 16.66% !important;
 clear: none !important;
}

しかし、それは私の問題に影響を与えるべきではありません。実際、私もすべてを取り除こうとしたので、例の 1 つとまったく同じように見えましたが、それでも同じ悪い結果が得られました。

では、どうすればこの問題を解決できますか? または、例のように固定位置でページの上部にナビゲーションバーを追加するためのより良い/代替方法はありますか?

以下は、iPhone でメニューがどのように表示され、項目 3 が押されているかのスクリーンショットです。