diff --git a/sass/layout/_header.scss b/sass/layout/_header.scss index 283f8d68ed..8b8aaf8c8b 100644 --- a/sass/layout/_header.scss +++ b/sass/layout/_header.scss @@ -57,16 +57,20 @@ div.header-wrapper { } } - @media screen and (max-width: 920px) { - border-bottom: 1px solid darken($mit-red, 5%); + + @media screen and (max-width: 900px) { display: block; float: none; h1 { - float: right; + float: left; border: 0; - margin-right: 0; - padding-right: 0; + // margin-right: 0; + // padding-right: 0; + + // &:after { + // display: none; + // } } h2 { @@ -79,26 +83,25 @@ div.header-wrapper { } nav { - float: left; - display: block; - margin: 0; - padding: 0; - text-shadow: 0 -1px 0 darken($mit-red, 10%); -webkit-font-smoothing: antialiased; - background: #501016; - margin-top: 5px; - border-bottom: 1px solid darken(#501016, 10%); @include border-radius(3px 3px 0 0); @include box-shadow(inset 0 0 0 1px darken(#501016, 5%), inset 0 2px 0 lighten(#501016, 5%)); + background: #501016; + border-bottom: 1px solid darken(#501016, 10%); + display: block; + float: left; + margin: 5px 0 0; + padding: 0; + text-shadow: 0 -1px 0 darken($mit-red, 10%); ul { @extend .clearfix; margin: 0; li { - display: inline-block; - margin-bottom: 0; line-height: lh(); + margin-bottom: 0; + float: left; a { color: #fff; @@ -107,6 +110,10 @@ div.header-wrapper { display: block; font-weight: bold; + @media screen and (max-width: 1020px) { + padding: 10px lh(.7) 8px; + } + &:hover { color: rgba(#fff, .7); background-color: none; @@ -116,6 +123,20 @@ div.header-wrapper { } } + @media screen and (max-width: 900px) { + width: 100%; + float: none; + + ul { + li { + padding: auto; + display: table-cell; + width: 16.6666666667%; + text-align: center; + } + } + } + .active { background: #F4F4F4; color: #333;