JQuery Mobile Navbar Background Color

Question

Hi all I am currently using JQuery Mobile to create a web app. I currently have a navbar across the top of my page with a series of images centered inside each button on the navbar. I have set the "data-theme=b" but this doesnt give me the colour I want. I have tried removing this and setting the background colour using the css but I havent had much luck.

I was just wondering is it possible to change the navbar colour using just the css or some jquery.

My code for the navbar is:

<div data-role="navbar"><!-- navbar -->
  <ul>
    <li><a href="index.html" data-ajax="false" data-transition="flip" ><img src="../../images/icons/SearchLarge.png" height="30px;" width="30px;"></a></li>
    <li><a href="../../index.html" data-ajax="false" data-theme="b"><img src="../../images/icons/ApplicationL.png" height="30px;" width="30px;"></a></li>
    <li><a href="../app/index.html" data-ajax="false" data-theme="b"><img src="../../images/icons/App3.png" height="30px;" width="30px;"></a></li>
    <li><a href="#" data-ajax="false" data-theme="b"><img src="../../images/icons/View.png" height="30px;" width="10px;"></a></li>
    <li><a href="#" data-ajax="false" data-theme="b"><img src="../../images/icons/Last2.png" height="30px;" width="30px;"></a></li>
   </ul>
 </div><!-- /navbar -->

Answer 1

There's nothing wrong with your code.

Navbar color theme is blue by default and data-theme="b" is that blue color. Change it to a to see the difference.

Working jsFiddle example: http://jsfiddle.net/Gajotres/vTBGa/

<div data-role="navbar"><!-- navbar -->
    <ul>
        <li><a href="index.html" data-ajax="false" data-transition="flip" ><img src="../../images/icons/SearchLarge.png" height="30px;" width="30px;"/></a></li>
        <li><a href="../../index.html" data-ajax="false" data-theme="b"><img src="../../images/icons/ApplicationL.png" height="30px;" width="30px;"/></a></li>
        <li><a href="../app/index.html" data-ajax="false" data-theme="b"><img src="../../images/icons/App3.png" height="30px;" width="30px;"/></a></li>
        <li><a href="#" data-ajax="false" data-theme="b"><img src="../../images/icons/View.png" height="30px;" width="10px;"/></a></li>
        <li><a href="#" data-ajax="false" data-theme="a"><img src="../../images/icons/Last2.png" height="30px;" width="30px;"/></a></li>
    </ul>
</div><!-- /navbar -->

If you are manually changing background color it must be done with a !important override because in any other case your custom CSS will be discarded.

#other-color {
    background: red !important;
}

In case you want to find more about how jQuery Mobile handles markup enhancements, then take a look at this ARTICLE, it is my personal blog. There can be bound much much more then this, also this topic is discussed in the chapter:

Answer 2

You need to wrap the navbar with a div with classes ui-body and ui-body-b.

Demo

<div class="ui-body-b ui-body">
  <div data-role="navbar">
    <ul>
        <li><a href="#" data-icon="grid">A</a></li>
        <li><a href="#" data-icon="star">B</a></li>
        <li><a href="#" data-icon="gear">C</a></li>
        <li><a href="#" data-icon="arrow-l">D</a></li>
        <li><a href="#" data-icon="arrow-r">E</a></li>
    </ul>
  </div><!-- /navbar -->
</div><!-- /container -->

Answer 3

data-role="navbar">
            <ul>
                <li><a href="index.html" data-ajax="false" data-transition="flip" ><img src="../../images/icons/SearchLarge.png" height="30px;" width="30px;"></a></li>

                <li style="background=#000;"><a href="../../index.html" data-ajax="false"><img src="../../images/icons/ApplicationL.png" height="30px;" width="30px;"></a></li>

                <li syle="background=#000;"><a href="../app/index.html" data-ajax="false"><img src="../../images/icons/App3.png" height="30px;" width="30px;"></a></li>

                <li><a href="#" data-ajax="false" data-theme="b"><img src="../../images/icons/View.png" height="30px;" width="10px;"></a></li>

                <li><a href="#" data-ajax="false" data-theme="b"><img src="../../images/icons/Last2.png" height="30px;" width="30px;"></a></li>
            </ul>
        </div>