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


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


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%;">
     <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>


Demo here -

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 -



All Articles