diff options
-rw-r--r-- | app/assets/stylesheets/responsive/_header_layout.scss | 106 |
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); |