title: jQueryMobile theming a navbar in a header with a different swatch
body: <p>Using jquerymobile theming, I want the navbars in the header to use a different swatch than the header. According to the examples at the bottom of <a href="http://jquerymobile.com/demos/1.1.1/docs/toolbars/docs-navbar.html" rel="nofollow">http://jquerymobile.com/demos/1.1.1/docs/toolbars/docs-navbar.html</a>, it seems that all I need to do is apply the themes to the individual links that serve as navbar items. If you view source on the examples, they look similar to what I have in my code.</p>
  
  <p>Currently, swatch A is applied to the header (where the logo image is), but the navbar is just a standard grey.</p>
  
  <pre><code>  &lt;section data-role="page" data-theme="a"&gt;
        &lt;header data-role="header"&gt;
          &lt;img src="images/mcn-logo-rev.png" id="logo" /&gt;
          &lt;img src="images/question-mark-in-circle.png" id="help" class="ui-btn-right" /&gt;
  
          &lt;div data-role="navbar"&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" data-icon="mcn-messages" data-theme="b"&gt;Messages&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" data-icon="mcn-groups" data-theme="b"&gt;Groups&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" data-icon="mcn-settings" data-theme="b"&gt;Settings&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div data-role="navbar"&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" data-theme="b"&gt;All&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" data-theme="b"&gt;Unread&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" data-theme="b"&gt;Search&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
  ...
  </code></pre>