diff --git a/src/styles/components/_bar.scss b/src/styles/components/_bar.scss
index c4b97a61..ab69db0d 100644
--- a/src/styles/components/_bar.scss
+++ b/src/styles/components/_bar.scss
@@ -21,7 +21,7 @@
 
 #bar {
   left: 0;
-  min-height: 44px;
+  min-height: $minbarheight;
   position: absolute;
   right: 0;
   top: 0;
@@ -29,6 +29,9 @@
 }
 
 .bar {
+  // without height bar jumps and disappears on reload
+  // use em to scale with text.
+  height: #{$minbarheight/$base-font-size}em;
   background-color: $componentbg;
   color: $componentfg1;
   font: bold 1em/40px $font-sans-serif;
diff --git a/src/styles/global/_variables.scss b/src/styles/global/_variables.scss
index 2a8dc2dd..882bf5b2 100644
--- a/src/styles/global/_variables.scss
+++ b/src/styles/global/_variables.scss
@@ -50,6 +50,8 @@ $base-line-height: 19px;
 
 $audiovideolevel: #9dd53a;
 
+//main navigation bar
+$minbarheight: 44px;
 
 // ** Fontawsome changed variables **
 // original at libs/fontawesome/_variables.scss
diff --git a/src/styles/main.scss b/src/styles/main.scss
index a23c6b9b..da3386a8 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -20,7 +20,7 @@
  */
 
 @import "global/variables";
-@import "compass";
+// @import "compass";
 @import "libs/libs";
 
 @import "global/mixins";