diff --git a/demos/test/panels/index.html b/demos/test/panels/index.html
index d0ff5ab578e..90f47dc4aef 100644
--- a/demos/test/panels/index.html
+++ b/demos/test/panels/index.html
@@ -11,25 +11,29 @@
 	<script>
 		$( document ).on( "pagecreate", function() {
 			$( "body > [data-role='panel']" ).panel();
-			$( "#outside [data-role='listview']" ).listview();
+			$( "body > [data-role='panel'] [data-role='listview']" ).listview();
+			$( "body > [data-role='header']" ).toolbar();
+			$( "body > [data-role='header'] [data-role='navbar']" ).navbar();
 		});
 	</script>
 </head>
 <body>
+
+	<div data-role="header" data-position="fixed" data-theme="a">
+		<h1>Header index.html</h1>
+		<a href="#outside" data-icon="bars" data-iconpos="notext">Menu</a>
+		<a href="#inside-a" data-icon="bars" data-iconpos="notext">Menu</a>
+		<div data-role="navbar">
+			<ul>
+				<li><a href="index.html">Page A</a></li>
+				<li><a href="page-b.html">Page B</a></li>
+				<li><a href="page-c.html">Page C</a></li>
+			</ul>
+		</div>
+	</div><!-- /header -->
+
 	<div data-role="page" id="a">
 	
-		<div data-role="header" data-position="fixed">
-			<h1>Header</h1>
-			<a href="#outside" data-icon="bars" data-iconpos="notext">Menu</a>
-			<a href="#inside-a" data-icon="bars" data-iconpos="notext">Menu</a>
-			<div data-role="navbar">
-				<ul>
-					<li><a href="index.html" class="ui-btn-active ui-state-persist">Page A</a></li>
-					<li><a href="page-b.html">Page B</a></li>
-					<li><a href="page-c.html">Page C</a></li>
-				</ul>
-			</div>
-		</div><!-- /header -->
 		
 		<div data-role="content">
 		
@@ -48,7 +52,13 @@ <h2>Page A</h2>
 		</div>
 		
 		<div data-role="footer" data-position="fixed">
-			<h4>Footer</h4>
+			<div data-role="navbar">
+				<ul>
+					<li><a href="index.html" class="ui-btn-active ui-state-persist">Page A</a></li>
+					<li><a href="page-b.html">Page B</a></li>
+					<li><a href="page-c.html">Page C</a></li>
+				</ul>
+			</div>
 		</div><!-- /header -->
 	
 	</div><!-- /page -->
@@ -59,7 +69,8 @@ <h4>Footer</h4>
 			<li>List item</li>
 			<li>List item</li>
 		</ul>
-		<p>sibling page A</p>
+		<br><br>
+		<p>index.html</p>
 	</div>
 
 </body>
diff --git a/demos/test/panels/page-b.html b/demos/test/panels/page-b.html
index 43315a960e8..26684c961b8 100644
--- a/demos/test/panels/page-b.html
+++ b/demos/test/panels/page-b.html
@@ -11,27 +11,29 @@
 	<script>
 		$( document ).on( "pagecreate", function() {
 			$( "body > [data-role='panel']" ).panel();
-			$( "#outside [data-role='listview']" ).listview();
+			$( "body > [data-role='panel'] [data-role='listview']" ).listview();
+			$( "body > [data-role='header']" ).toolbar();
+			$( "body > [data-role='header'] [data-role='navbar']" ).navbar();
 		});
 	</script>
 </head>
 <body>
 	
+	<div data-role="header" data-position="fixed" data-theme="a">
+		<h1>Header page-b.html</h1>
+		<a href="#outside" data-icon="bars" data-iconpos="notext">Menu</a>
+		<a href="#inside-b" data-icon="bars" data-iconpos="notext">Menu</a>
+		<div data-role="navbar">
+			<ul>
+				<li><a href="./">Page A</a></li>
+				<li><a href="page-b.html">Page B</a></li>
+				<li><a href="page-c.html">Page C</a></li>
+			</ul>
+		</div>
+	</div><!-- /header -->
+	
 	<div data-role="page" id="b">
 	
-		<div data-role="header" data-position="fixed">
-			<h1>Header</h1>
-			<a href="#outside" data-icon="bars" data-iconpos="notext">Menu</a>
-			<a href="#inside-b" data-icon="bars" data-iconpos="notext">Menu</a>
-			<div data-role="navbar">
-				<ul>
-					<li><a href="./">Page A</a></li>
-					<li><a href="page-b.html" class="ui-btn-active ui-state-persist">Page B</a></li>
-					<li><a href="page-c.html">Page C</a></li>
-				</ul>
-			</div>
-		</div><!-- /header -->
-		
 		<div data-role="content">
 		
 			<h2>Page B</h2>
@@ -49,7 +51,13 @@ <h2>Page B</h2>
 		</div>
 		
 		<div data-role="footer" data-position="fixed">
-			<h4>Footer</h4>
+			<div data-role="navbar">
+				<ul>
+					<li><a href="./">Page A</a></li>
+					<li><a href="page-b.html" class="ui-btn-active ui-state-persist">Page B</a></li>
+					<li><a href="page-c.html">Page C</a></li>
+				</ul>
+			</div>
 		</div><!-- /header -->
 	
 	</div><!-- /page -->
@@ -60,7 +68,8 @@ <h4>Footer</h4>
 			<li>List item</li>
 			<li>List item</li>
 		</ul>
-		<p>sibling page B</p>
+		<br><br>
+		<p>page-b.html</p>
 	</div>
 	
 </body>
diff --git a/demos/test/panels/page-c.html b/demos/test/panels/page-c.html
index 43db53e4f59..200231247c8 100644
--- a/demos/test/panels/page-c.html
+++ b/demos/test/panels/page-c.html
@@ -11,7 +11,9 @@
 	<script>
 		$( document ).on( "pagecreate", function() {
 			$( "body > [data-role='panel']" ).panel();
-			$( "#outside [data-role='listview']" ).listview();
+			$( "body > [data-role='panel'] [data-role='listview']" ).listview();
+			$( "body > [data-role='header']" ).toolbar();
+			$( "body > [data-role='header'] [data-role='navbar']" ).navbar();
 		});
 	</script>
 </head>
@@ -23,9 +25,23 @@
 			<li>List item</li>
 			<li>List item</li>
 		</ul>
-		<p>sibling page C</p>
+		<br><br>
+		<p>page-c.html</p>
 	</div>
 	
+	<div data-role="header" data-position="fixed" data-theme="a">
+		<h1>Header page-c.html</h1>
+		<a href="#outside" data-icon="bars" data-iconpos="notext">Menu</a>
+		<a href="#inside-c" data-icon="bars" data-iconpos="notext">Menu</a>
+		<div data-role="navbar">
+			<ul>
+				<li><a href="./">Page A</a></li>
+				<li><a href="page-b.html">Page B</a></li>
+				<li><a href="page-c.html">Page C</a></li>
+			</ul>
+		</div>
+	</div><!-- /header -->
+			
 	<div data-role="page" id="c">
 	
 		<div data-role="panel" id="inside-c" data-position="right" data-theme="b">
@@ -36,19 +52,6 @@
 			</ul>
 		</div>
 	
-		<div data-role="header" data-position="fixed">
-			<h1>Header</h1>
-			<a href="#outside" data-icon="bars" data-iconpos="notext">Menu</a>
-			<a href="#inside-c" data-icon="bars" data-iconpos="notext">Menu</a>
-			<div data-role="navbar">
-				<ul>
-					<li><a href="./">Page A</a></li>
-					<li><a href="page-b.html">Page B</a></li>
-					<li><a href="page-c.html" class="ui-btn-active ui-state-persists">Page C</a></li>
-				</ul>
-			</div>
-		</div><!-- /header -->
-		
 		<div data-role="content">
 		
 			<h2>Page C</h2>
@@ -58,7 +61,13 @@ <h2>Page C</h2>
 		</div><!-- /content -->
 		
 		<div data-role="footer" data-position="fixed">
-			<h4>Footer</h4>
+			<div data-role="navbar">
+				<ul>
+					<li><a href="./">Page A</a></li>
+					<li><a href="page-b.html">Page B</a></li>
+					<li><a href="page-c.html" class="ui-btn-active ui-state-persists">Page C</a></li>
+				</ul>
+			</div>
 		</div><!-- /header -->
 	
 	</div><!-- /page -->
