data-theme not working on navbar. jQuery Mobile
-
12-12-2019 - |
Question
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.
Solution
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/
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow