I am having issues applying theme on a navbar using Jquery mobile. no matter whatever theme I apply the navbar is set to 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 there website.
Applying a theme to the navbar container is not supported and it will inherit the theme of the navbar's parent container.If you want to apply a theme to the navbar you can specify a data-theme to the individual items in the navbar.Something like this
<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>
A demo here - http://jsfiddle.net/PyyUy/
Edit-Answer for how to give a hover color
If you want to give a hover color you can use the following CSS
.ui-navbar li a:hover{
background:red !important;
}
Updated fiddle - http://jsfiddle.net/PyyUy/1/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.