JQuery Mobile tips : how to override navbar data-role style

before and after navbar jquery mobile

Like above picture, you can override default navbar style in JQuery Mobile.

How to do that ? Quite easy for you if you have familiarized with CSS programming.

Just look at code snippet below

<style>
.ui-grid-a .ui-block-a { clear: none; }
.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 16%; }
</style>

Put this code in your <head> area, and in every page you want to override the navbar data-role.