diff --git a/common/static/js/utils/rwd_header_footer.js b/common/static/js/utils/rwd_header_footer.js index 3849674d32..83ba652c8b 100644 --- a/common/static/js/utils/rwd_header_footer.js +++ b/common/static/js/utils/rwd_header_footer.js @@ -17,8 +17,8 @@ init: function() { _fn.$header = $( _fn.header ); _fn.$footer = $( _fn.footer ); - _fn.$nav = _fn.$header.find('nav'); - _fn.$globalNav = _fn.$nav.find('.nav-global'); + _fn.$navContainer = _fn.$header.find('.nav-container'); + _fn.$globalNav = _fn.$header.find('.nav-global'); _fn.add.elements(); _fn.add.classes(); @@ -38,7 +38,7 @@ }, burger: function() { - _fn.$nav.prepend([ + _fn.$navContainer.prepend([ '', '', '' @@ -46,7 +46,7 @@ }, registerLink: function() { - var $register = _fn.$nav.find('.cta-register'), + var $register = _fn.$header.find('.cta-register'), $li = {}, $a = {}, count = 0; @@ -77,7 +77,7 @@ click: function() { // Toggle menu - _fn.$nav.on( 'click', '.mobile-menu-button', _fn.toggleMenu ); + _fn.$header.on( 'click', '.mobile-menu-button', _fn.toggleMenu ); } }, diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index 3e1e686802..b544d5d882 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -7,7 +7,7 @@ width: 100%; .course-material{ - @extend %inner-wrapper; + @extend %inner-wrapper; } ol.course-tabs { @@ -76,6 +76,14 @@ header.global.slim { border-bottom: 1px solid $outer-border-color; background: $header-bg; + .wrapper-header { + padding-top: ($baseline/4); + } + + .nav-account-management { + padding: 0; + } + .guest .secondary { margin-right: 0; } @@ -147,6 +155,7 @@ header.global.slim { } } + .nav-main, .nav-global { display: none; } diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 8c0b848be2..e08ff32f1b 100644 --- a/lms/static/sass/shared/_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -10,13 +10,13 @@ header.global { position: relative; width: 100%; - nav { + .wrapper-header { @include clearfix(); height: 40px; margin: 0 auto; padding: 18px ($baseline/2) 0; max-width: grid-width(12); - min-width: 760px; + width: 100%; } h1.logo { @@ -29,6 +29,15 @@ header.global { } } + nav { + @include clearfix(); + height: 40px; + margin: 0 auto; + padding: 18px ($baseline/2) 0; + max-width: grid-width(12); + min-width: 760px; + } + .left { @include float(left); } @@ -119,6 +128,7 @@ header.global { > a { margin: 0; @include border-right-radius(0px); + background-image: none; } &:last-child { @@ -148,7 +158,7 @@ header.global { .icon { display: inline-block; @include float(left); - margin: 3px 0 -3px 0; + @include margin(2px, 6px, -3px, 3px); font-size: 1.2em; color: $m-gray; } @@ -191,6 +201,7 @@ header.global { box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3); border: 1px solid $border-color-3; display: none; + margin-top: 0; padding: 5px 10px; position: absolute; @include right(0px); @@ -216,7 +227,7 @@ header.global { height: 0px; position: absolute; @include transform(rotate(-45deg)); - @include right(12px); + @include right(7px); top: -6px; width: 0px; } @@ -349,13 +360,17 @@ header.global-new { box-shadow: 0 1px 5px 0 $shadow-l1; background: $header-bg; - nav { + .wrapper-header { @include clearfix(); @include box-sizing(border-box); - width: grid-width(12); height: 74px; margin: 0 auto; padding: 17px 0; + max-width: grid-width(12); + + &:not(.rwd) { + min-width: grid-width(9); + } } h1.logo { @@ -372,6 +387,10 @@ header.global-new { @include float(left); } + .nav-account-management { + margin: 0 auto; + } + .guest { @include float(right); } @@ -455,6 +474,7 @@ header.global-new { > a { margin: 0; @include border-right-radius(0); + background-image: none; } &:last-child { @@ -483,7 +503,7 @@ header.global-new { .icon { display: inline-block; @include float(left); - margin: 3px 0 -3px 0; + @include margin(2px, 6px, -3px, 3px); font-size: 1.2em; color: $m-gray; } @@ -526,6 +546,7 @@ header.global-new { box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3); border: 1px solid $border-color-3; display: none; + margin-top: 0; padding: 5px 10px; position: absolute; @include right(0); @@ -551,7 +572,7 @@ header.global-new { height: 0px; position: absolute; @include transform(rotate(-45deg)); - @include right(12px); + @include right(7px); top: -6px; width: 0px; } @@ -607,7 +628,7 @@ header.global-new { padding: 3px 10px; font-size: 18px; line-height: 24px; - font-weight: 500; + font-weight: 600; font-family: $header-sans-serif; color: $courseware-navigation-color; @@ -657,14 +678,13 @@ header.global-new { } &.rwd { - nav { - max-width: 1180px; + .wrapper-header { width: 320px; } .mobile-menu-button { + @include float(left); display: inline; - float: left; text-decoration: none; color: $m-gray; font-size: 18px; @@ -679,9 +699,9 @@ header.global-new { .logo { position: absolute; - width: 54px; - left: calc( 50% - 90px ); top: 20px; + @include left(calc(50% - 90px)); + width: 54px; img { width: 54px; @@ -721,7 +741,7 @@ header.global-new { a { color: white; padding: 10px; - font-weight: 300; + font-weight: 400; &:hover, &:focus { @@ -746,8 +766,9 @@ header.global-new { } @include media( $desktop ) { - nav { + .wrapper-header { width: 100%; + min-width: 800px; } .mobile-menu-button { @@ -756,10 +777,9 @@ header.global-new { .logo { position: relative; + top: 0; + @include left(0); width: auto; - top: inherit; - left: inherit; - margin-left: ($baseline/2); img { width: auto; @@ -778,7 +798,7 @@ header.global-new { a { color: $courseware-navigation-color; padding: 3px 10px; - font-weight: 500; + font-weight: 600; &:hover, &:focus { @@ -809,8 +829,8 @@ header.global-new { } @include media( $xl-desktop ) { - nav { - padding: 17px 10px; + .wrapper-header { + padding: 17px 0; } .nav-global, @@ -819,10 +839,6 @@ header.global-new { font-size: 18px; } } - - .logo { - margin-left: 0; - } } } } diff --git a/lms/templates/main.html b/lms/templates/main.html index 5fbc3dffcb..0c29e080a8 100644 --- a/lms/templates/main.html +++ b/lms/templates/main.html @@ -149,7 +149,7 @@ <%block name="footer"> - ## Can be overridden by child templates wanting to hide the footer. + ## Can be overridden by child templates wanting to hide the footer. <% if theme_enabled() and not is_microsite(): footer_file = 'theme-footer.html' diff --git a/lms/templates/navigation-edx.html b/lms/templates/navigation-edx.html index 8cfb9a242d..5658e242ca 100644 --- a/lms/templates/navigation-edx.html +++ b/lms/templates/navigation-edx.html @@ -37,11 +37,12 @@ site_status_msg = get_site_status_msg(course_id) % if course: