diff --git a/css/style.css b/css/style.css
index 41b9fcc..c04a74a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2,6 +2,22 @@
     height: 100%;
 }
 
+#new-note {
+    width: 100%;
+    padding: 10px;
+    padding-left: 34px;
+    background-position: 10px center;
+    text-align: left;
+    margin: 0;
+}
+
+#new-note-fixed {
+    z-index: 111; /* navigation menu is 110 ;-) */
+    background-color: rgba(255, 255, 255, .75);
+    padding: 10px;
+    position: relative;
+}
+
 .quicknote {
     min-height: 150px;
     width: 250px;
diff --git a/templates/part.navigation.php b/templates/part.navigation.php
index 9cea4fc..e2b1fcf 100644
--- a/templates/part.navigation.php
+++ b/templates/part.navigation.php
@@ -2,7 +2,9 @@
 <div style="display:none" id="new-note-string"><?php p($l->t('New note')); ?></div>
 
 <script id="navigation-tpl" type="text/x-handlebars-template">
-	<li id="new-note"><a href="#" class="icon-add svg"><?php p($l->t('New note')); ?></a></li>
+	<div id="new-note-fixed">
+		<div><button type="button" id="new-note" class="icon-add"><?php p($l->t('New note'));?></button></div>
+	</div>
 	<li id="all-notes"><a href="#" class="icon-home svg"><?php p($l->t('All notes')); ?></a></li>
 	<li id="shared-with-you"><a href="#" class="icon-share svg"><?php p($l->t('Shared with you')); ?></a></li>
 	<li id="shared-by-you"><a href="#" class="icon-share svg"><?php p($l->t('Shared with others')); ?></a></li>