Merge 294cbbb into 9a2b830

andela · Jun 12, 2019 · 8dc8fee · 8dc8fee
2 parents 9a2b830 + 294cbbb
commit 8dc8fee
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 20 deletions.
diff --git a/src/assets/styles/header.scss b/src/assets/styles/header.scss
@@ -17,17 +17,38 @@
 
 @media (max-width: 768px) {
   .dropdown-custom {
-    border: none !important;
     margin-top: 0.2em !important;
   }
 }
 
-@media (max-width: 1020px) and (min-width: 760px) {
-  .dropdown-custom {
-    margin-left: 38em !important;
-    text-align: right !important;
+@media (max-width: 1024px) {
+  .navbar-expand-lg .navbar-nav .dropdown-menu {
+    position: absolute;
   }
-  .navbar-custom {
-    margin-left: 7em !important;
+
+  .nav-link {
+    text-align: center;
+    margin-right: 10px;
   }
 }
+
+.navbar-collapse.collapse {
+  display: contents !important;
+}
+
+.navbar-nav > li,
+.navbar-nav {
+  float: right !important;
+}
+
+.navbar-right {
+  float: right !important;
+}
+
+.custom-nav-lo {
+  display: flex;
+}
+
+.nav-link {
+  padding-right: 15px;
+}
diff --git a/src/components/layout/Header.js b/src/components/layout/Header.js
@@ -18,17 +18,6 @@ class Header extends Component {
         <NavLink className="navbar-brand" to="/" data-set="nav-bar-brand-test">
           Authors Haven
         </NavLink>
-        <button
-          className="navbar-toggler"
-          type="button"
-          data-toggle="collapse"
-          data-target="#navbarSupportedContent"
-          aria-controls="navbarSupportedContent"
-          aria-expanded="false"
-          aria-label="Toggle navigation"
-        >
-          <span className="navbar-toggler-icon" />
-        </button>
 
         <div className="collapse navbar-collapse align-rt" id="navbarSupportedContent">
           <ul className="navbar-nav ml-auto">{links}</ul>

diff --git a/src/components/layout/LoggedOutLinks.js b/src/components/layout/LoggedOutLinks.js
@@ -1,20 +1,21 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import '../../assets/styles/header.scss';
 
 /*
  *@return {jsx} to display in the Header component
  *for navigation links when user is
  * logged out
  */
 const LoggedOutLinks = () => (
-  <>
+  <div className="custom-nav-lo">
     <NavLink className="nav-link" to="/signup">
       Sign up
     </NavLink>
     <NavLink className="nav-link" to="/login">
       Login
     </NavLink>
-  </>
+  </div>
 );
 
 export default LoggedOutLinks;