refactored and simplified the navigation layout

1 files changed, 43 insertions, 63 deletions

diff --git a/app/assets/stylesheets/responsive/_header_layout.scss b/app/assets/stylesheets/responsive/_header_layout.scss
index 8d58c1891..cef62226d 100644
--- a/app/assets/stylesheets/responsive/_header_layout.scss
+++ b/app/assets/stylesheets/responsive/_header_layout.scss
@@ -77,78 +77,58 @@
 
 
 #topnav{
-    padding: 0  0 1em 0;
-    @media( min-width: $main_menu-mobile_menu_cutoff ){
-        padding: 0;
-    }
-    ul{
-        list-style: none;
-        @include grid-row;
-        padding: 0;
-    }
+  padding: 0  0 1em 0;
+  @media( min-width: $main_menu-mobile_menu_cutoff ){
+      padding: 0;
+  }
+}
+
+#navigation {
+    list-style: none outside none;
+    @include grid-row;
+    padding: 0;
+    position: relative;
+    border-bottom: 1px solid #e9e9e9;
     /* Spread the nav elements horizontally on larger screens */
     li{
-        @include grid-column(12);
+        display: block;
         @media( min-width: $main_menu-mobile_menu_cutoff ){
-            @include grid-column(2);
-            padding:0;
+          display: inline-block;
         }
+    }
+    a{
+      padding: 0.5em 1em;
+      display: block;
+      @media( min-width: $main_menu-mobile_menu_cutoff ){
+        display: inline-block;
+      }
+    }
+}
 
-        &#navigation_search{
-
-            @include grid-column(12);
-            padding: 0.35em 1em;
-
-            @media( min-width: $main_menu-mobile_menu_cutoff ){
-                @include grid-column(4);
-                padding: 0.35em 0 0 0;
-            }
-
-            form{
-                @include grid-row;
-                padding-right: 1em;
-            }
-            input{
-                @include grid-column($columns:9);
-                margin:0;
-            }
-            label{
-                @include prefix-postfix-base;
-                @include grid-column($columns:3,$float:left);
-                border:none;
-                img{
-                    max-width: 100%;
-                }
-            }
-        }
-        padding: 0;
-        a{
-            @media( min-width: $main_menu-mobile_menu_cutoff ){
-                font-weight: normal;
-                text-align: center;
-            }
-            @media( min-width: $main_menu-mobile_menu_cutoff ) and ( max-width: 55em ){
-                font-size: 0.8em;
-            }
-            display:block;
-            width:100%;
-            height:100%;
-            min-height: 2.875em;
-            padding: 0.6em 1em;
-        }
-        &.active a{
-            @media( min-width: $main_menu-mobile_menu_cutoff ){
-                padding-top: 1.2em;
-                margin-top: -0.5em;
-            }
+#navigation_search {
+   @media( min-width: $main_menu-mobile_menu_cutoff ){
+        position: absolute;
+        top: 0;
+        right: 0;
+  }
+  form{
+        @include grid-row;
+        padding-right: 1em;
+    }
+    input{
+        @include grid-column($columns:9);
+        margin:0;
+    }
+    label{
+        @include prefix-postfix-base;
+        @include grid-column($columns:3,$float:left);
+        border:none;
+        img{
+            max-width: 100%;
         }
-
     }
-
 }
 
-
-
 #logged_in_bar{
     @media( min-width: $main_menu-mobile_menu_cutoff ){
         @include grid-column(8);