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)
%block>