header: don't use fixed position

A fixed div at the top prevents anchors and pageup/pagedown from working
correctly ... and it is not like the top menu items are used all the time -
next/previous page links would be more relevant to show in a fixed position.

made the upper menu as a dropdown to old fixed mode by clicking upper
semi transparent bar

rhodecode/public/css/style.css

@@ -243,8 +243,6 b' div:hover > a.permalink {'
 }
 
 #header {
-    margin: 0;
-    padding: 0 10px;
 }
 
 #header ul#logged-user {
@@ -310,6 +308,26 b' div:hover > a.permalink {'
 #header ul#logged-user li.highlight a:hover {
     color: #FFF;
 }
+#header-dd {
+    clear: both;
+    position: fixed !important;
+    background-color: #003B76;
+    opacity: 0.01;
+    cursor: pointer;
+    min-height: 10px;	
+    width: 100% !important;
+    -webkit-border-radius: 0px 0px 4px 4px;
+    -khtml-border-radius: 0px 0px 4px 4px;
+    -moz-border-radius: 0px 0px 4px 4px;
+    border-radius: 0px 0px 4px 4px;
+}
+
+#header-dd:hover{
+	opacity: 0.2;
+    -webkit-transition: opacity 0.5s ease-in-out;
+    -moz-transition: opacity 0.5s ease-in-out;
+    transition: opacity 0.5s ease-in-out;	
+}
 
 #header #header-inner {
     min-height: 44px;
@@ -335,14 +353,13 b' div:hover > a.permalink {'
     border-radius: 4px 4px 4px 4px;
 }
 #header #header-inner.hover {
-    position: fixed !important;
     width: 100% !important;
-    margin-left: -10px !important;
-    z-index: 10000;
     -webkit-border-radius: 0px 0px 0px 0px;
     -khtml-border-radius: 0px 0px 0px 0px;
     -moz-border-radius: 0px 0px 0px 0px;
     border-radius: 0px 0px 0px 0px;
+    position: fixed !important;
+    z-index: 10000;    
 }
 
 .ie7 #header #header-inner.hover,
@@ -3485,7 +3502,7 b' div.gravatar img {'
 #content {
     clear: both;
     overflow: hidden;
-    padding: 54px 10px 14px 10px;
+    padding: 10px 10px 14px 10px;
 }
 
 #content div.box div.title div.search {

rhodecode/templates/base/base.html

@@ -2,8 +2,9 b''
 <%inherit file="root.html"/>
 
 <!-- HEADER -->
+<div id="header-dd"></div>
 <div id="header">
-    <div id="header-inner" class="title hover">
+    <div id="header-inner" class="title">
         <div id="logo">
             <h1><a href="${h.url('home')}">${c.rhodecode_name}</a></h1>
         </div>
@@ -357,5 +358,10 b''
       }
       return false;
      });
+
+     YUE.on('header-dd', 'click',function(e){
+         YUD.addClass('header-inner', 'hover');	 
+     });
+
 </script>
 </%def>