Clever Geek Handbook

Data-theme doesn't work on navbar. jQuery Mobile

I am having problems applying a theme on a navbar using jQuery mobile. no matter the theme I use, the navbar is set to the default theme. Here is the attached code

<div data-role="navbar" style="width: 80%; padding: 2% 10%;" data-theme="b">
    <ul>
        <li><a href="#" class="ui-btn-active ui-corner-left">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#" class="ui-corner-right">Three</a></li>
   </ul>
</div>

is there anything i am doing wrong here. I just copied the code from the website.

+3


source to share


1 answer


Applying a theme to the navbar container is not supported and inherits the theme from the parent navbar container. If you want to apply a theme to the navbar, you can specify a data theme for individual items in the navbar. Something like that

<div data-role="navbar" style="width: 80%; padding: 2% 10%;">
  <ul>
     <li><a href="#" class="ui-btn-active ui-corner-left" data-theme="e">One</a</li>
     <li><a href="#" data-theme="e">Two</a></li>
     <li><a href="#" class="ui-corner-right" data-theme="e">Three</a></li>
  </ul>
</div>

Demo here - http://jsfiddle.net/PyyUy/

Edit-Answer for giving the hover color



If you want to give the color of the hover you can use the following CSS

.ui-navbar li a:hover{
            background:red !important;
        }

Updated script - http://jsfiddle.net/PyyUy/1/

+4


source






More articles:


All Articles