Mini header fix on small screens

diff --git a/less/header.less b/less/header.less
index 828790c7fc37143689ba60c9af8176a6341ceb96..467661b9983c3ab053223b9521bdadd9f2ce740f 100644 (file)
--- a/less/header.less
+++ b/less/header.less
@@ -50,9 +50,6 @@ header {
        .logo {
                position: absolute;
                top: 36px;
-        transition: none;
-        white-space: nowrap; // Stops img elements wrapping under each other in IE.
-
                img {
                        width: auto;
                }
@@ -63,7 +60,7 @@ header {
        }
 
        .navigation {
-               margin: 59px 0 0;
+               margin: 57px 0 0;
                float: right;
                li {
                        margin: 0 20px 0 0;
@@ -72,6 +69,10 @@ header {
                        }
                }
        }
+
+       position: fixed;
+       top: 0px;
+       width: 100%;
 }
 
 #headerPlaceholder {
@@ -173,8 +174,8 @@ header {
        }
 
        nav[role=navigation].active {
-               max-height: 26em;
-               padding: 65px 0 30px 0;
+               max-height: 16em;
+               padding: 135px 0 20px 0;
                box-sizing: content-box;
        }
 
@@ -184,8 +185,6 @@ header {
                float: none;
                text-align: center;
                position: relative;
-        font-size: 32px;
-        line-height: 1.7;
 
                li {
                        float: none;
@@ -197,6 +196,7 @@ header {
                }
 
                a {
+                       color: #fff !important;
                        display: block;
                        &:hover {
                                border-radius: 0;

diff --git a/less/home.less b/less/home.less
index 7915f54a0bed4ef133894ac1f732c72c5743c195..cd4f2bfc71f9fcdd9d74bf29f798e8e1ac56d5cf 100644 (file)
--- a/less/home.less
+++ b/less/home.less
@@ -173,7 +173,7 @@ nav.active[role="navigation"] {
     h3 {
       font-size: 16px;
     }
-    
+
     a {
       width: 32.5%;
       max-width: 318px;