Jquery mobile navbar styling in header not working properly

Question

I am working on an Jquery mobile app using Cordova/PhoneGap where I want a navbar directly under my header, with a fixed position, so the navbar doesn't scroll with the content. If I place the navbar inside the header, it inherits the style of the header and the css of the navbar doesn't behave like it should. E.g. there is no highlighting when I click an item in the navbar, it just stays the same color as the header itself (black in my case) and there are also no more visible borders. Only the text inside the item responds to a click. I looked up a few examples, but none of them seem to work for me:
Example one
Example two

Here's my code for the page:

<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>

CSS for class iconnavbar is as follows:

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

But that shouldn't have any influence on my problem. In fact, I also tried to strip down everything so it looked exactly like one of the examples and I still got the same bad result.

So how do I fix this problem? Or is there a better/alternative way to add a navbar to the top of my page with a fixed position like in the examples?

Below is a screenshot of how the menu looks on an iPhone and item 3 is pressed.

Seems to work correctly in this fiddle: http://jsfiddle.net/ezanker/8fqmmv7n/ — ezanker, Sep 17 '15 at 13:55
I think I know what's going on. I did some styling to remove that square behind the bars icon in the upper left corner, that same styling removes everything from the other 'a' elements in the header. Your fiddle made me realize that, thank you :) I will try it out later and leave a comment here if that is indeed the problem. — Rory, Sep 17 '15 at 18:26
Thanks ezanker, thanks to you I found the problem and managed to fix it! — Rory, Sep 18 '15 at 08:46

score 0 · Accepted Answer · answered Sep 18 '15 at 08:45

Since I used styling to get rid of the square behind icons in the header like this:

.ui-header a {
  background: none !important;
  border: 0px;
}

It also effected the navbar I was trying to add. By simply changing the css to this:

.ui-header > a {
  background: none !important;
  border: 0px;
}

I achieved styling only the direct childs of the header of element type 'a'. I also preferred the navbar to be data-theme a and the header itself data-theme b. To achieve this, I created a fixed header with a headerwrapper class. This wraps the two different parts of my header together. I kept those two different parts in different divs, so I could style the top of my header with a different theme than my navbar. The final code is as follows:

<div data-role="page" id="page_tasks">
    <div data-role="header" class="headerwrapper" data-position="fixed">
        <div data-role="header" data-theme="b">
            <h1>Tasks</h1>
            <a href="#leftmenu" class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-bars"></a>
        </div>
        <div data-role="navbar" id="tasksnavbar">
            <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>
        <!-- here goes the content -->
    </div>
</div>

And finally to get rid of some spacing by the headerwrapper in the top of the screen:

.headerwrapper {
  border-top: 0px !important;
  padding-top: 0px !important;
}

For anyone using this: the classes/attributes I use in the ul of my navbar are totally unrelated, you can replace them with anything you want. The final result:

Jquery mobile navbar styling in header not working properly

1 Answers1