diff --git a/examples/img/mobile-zoombar.png b/examples/img/mobile-zoombar.png
new file mode 100644
index 0000000000..ff8e0490c7
Binary files /dev/null and b/examples/img/mobile-zoombar.png differ
diff --git a/examples/mobile-navigation.html b/examples/mobile-navigation.html
index 1a0528528a..fe69e118b6 100644
--- a/examples/mobile-navigation.html
+++ b/examples/mobile-navigation.html
@@ -5,6 +5,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <title>OpenLayers TouchNavigation Control</title>
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="style.mobile.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
     <script type="text/javascript" src="../lib/OpenLayers.js"></script>
     <script type="text/javascript" src="mobile-navigation.js"></script>
diff --git a/examples/style.mobile.css b/examples/style.mobile.css
new file mode 100644
index 0000000000..d9e9425310
--- /dev/null
+++ b/examples/style.mobile.css
@@ -0,0 +1,25 @@
+div.olControlZoomPanel {
+    height: 108px
+    width: 36px;
+    position: absolute;
+    top: 20px;
+    left: 20px;
+}
+div.olControlZoomPanel div {
+    width: 36px;
+    height: 36px;
+    background-image: url(img/mobile-zoombar.png);
+    left: 0;
+}
+div.olControlZoomPanel .olControlZoomInItemInactive {
+    top: 0;
+    background-position: 0 0;
+}
+div.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
+    top: 36px;
+    background-position: 0 -36px;
+}
+div.olControlZoomPanel .olControlZoomOutItemInactive {
+    top: 72px;
+    background-position: 0 -72px;
+}