Merge pull request #297 from mitodl/ahmedbelal/294-header-bug-bs4

#294 Fix Header Navbar Structure
mitodl · May 16, 2019 · 33e7d9b · 33e7d9b
2 parents fb796eb + d8d5193
commit 33e7d9b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 60 deletions.
diff --git a/static/js/components/TopAppBar.js b/static/js/components/TopAppBar.js
@@ -13,16 +13,14 @@ type Props = {
 const TopAppBar = ({ currentUser }: Props) => (
   <header className="header-holder">
     <div className="container">
-      <div className="logo-section">
-        <a href={routes.root}>
+      <nav className="sub-nav navbar navbar-expand-md link-section">
+        <a href={routes.root} className="navbar-brand">
           <img
             src="/static/images/mitx-pro-logo.png"
             className="site-logo"
             alt="MIT xPRO"
           />
         </a>
-      </div>
-      <nav className="sub-nav navbar navbar-toggleable-sm link-section">
         <button
           className="navbar-toggler nav-opener"
           type="button"
@@ -35,7 +33,10 @@ const TopAppBar = ({ currentUser }: Props) => (
           <span className="navbar-toggler-icon" />
           Menu
         </button>
-        <ul id="nav" className="collapse navbar-collapse">
+        <ul
+          id="nav"
+          className="collapse navbar-collapse px-0 justify-content-end"
+        >
           <li>
             <a href={routes.catalog} className="" aria-label="catalog">
               Catalog

diff --git a/static/scss/top-app-bar.scss b/static/scss/top-app-bar.scss
@@ -1,59 +1,18 @@
 // sass-lint:disable mixins-before-declarations
 
 .header-holder {
-  background: white;
-  padding: 20px 0;
-  position: relative;
-  z-index: 99;
+  padding: 20px 0px;
 
-  .container {
-    &:after {
-      clear: both;
-      content: '';
-      display: block;
-    }
+  @include media-breakpoint-down(md) {
+    max-width: 100%;
   }
 
-  .logo-section {
-    float: left;
-    width: 170px;
-
-    img {
-      display: block;
-      width: 100%;
-      height: auto;
-    }
+  .navbar {
+    padding: 0;
   }
 }
 
-.sub-nav {
-  float: right;
-  padding: 5px 0;
-  position: static;
-  display: block;
-  margin: 0;
-  min-height: 0;
-
-  .collapse.in {
-    display: block !important;
-  }
-}
-
-#nav {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  letter-spacing: -.32em;
-
-  @include media-breakpoint-down(sm) {
-    position: absolute;
-    left: 0;
-    background: white;
-    top: 100%;
-    width: 100%;
-    margin: 1px 0 0;
-  }
-
+.navbar-collapse {
   li {
     letter-spacing: normal;
     display: inline-block;
@@ -63,10 +22,6 @@
     font-weight: 500;
     padding: 0 0 0 10px;
 
-    @include media-breakpoint-down(sm) {
-      padding: 10px 0 10px 10px;
-    }
-
     a {
       padding: 5px 10px;
       color: black;
@@ -89,17 +44,23 @@
   }
 }
 
+.navbar-collapse.collapsing,
+.navbar-collapse.show {
+  display: flex;
+}
+
+.site-logo {
+  width: 154px;
+  height: auto;
+}
+
 .navbar-toggler.nav-opener {
   border: 1px solid $primary;
   border-radius: 2px;
   color: $primary;
   margin: 5px 0 0;
   padding: 8px 6px 6px;
 
-  @include media-breakpoint-up(sm) {
-    display: none;
-  }
-
   .navbar-toggler-icon {
     width: 18px;
     height: 15px;