Update nav bar styling

turingschool · May 20, 2024 · 4a4e88a · 4a4e88a
1 parent b5bb08d
commit 4a4e88a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 52 deletions.
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -1,12 +1,10 @@
 <nav role="navigation">
+  <a href="/" class="home-logo-link">
+    <img
+    src="/assets/icons/TuringSchool_LogoMark_Gray.png"
+    alt="Turing School of Software and Design logo">
+  </a>
   <ul class="nav-links">
-    <li>
-      <a href="/" class="home-logo-link">
-        <img
-          src="/assets/icons/TuringSchool_LogoMark_Gray.png"
-          alt="Turing School of Software and Design logo">
-      </a>
-    </li>
     <li class="uppercase">
       <a href="https://www.eventbrite.com/o/turing-school-of-software-design-9895674202" target="blank">
         Upcoming Workshops

diff --git a/_sass/home-page.scss b/_sass/home-page.scss
@@ -486,49 +486,40 @@ nav {
   font-weight: 700;
   z-index: 99;
   background: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
 }
+
 .nav-links {
-  display: grid;
-  grid-template-columns: auto 230px 230px;
-  grid-template-rows: 120px;
+  display: flex;
   align-items: center;
   justify-items: center;
-  grid-gap: 0 10px;
-  margin-top: 0;
-  list-style: none;
-
-  li:first-child {
-    justify-self: left;
-    margin: 5px 0;
-  }
+  list-style-type: none;
 
   a {
     color: $dark-gray;
-    border-bottom: 3px solid transparent;
     transition: border-color 0.3s;
+    text-decoration: none;
   }
 
-  li:not(:first-child) {
-    // Hover border does not apply to logo
+  li {
+    margin: 10px;
     a:hover {
       border-bottom: 3px solid lighten($turing-secondary, 25%);
     }
   }
+}
 
-  li:not(:first-child):hover {
-    background-color: #fff;
-  }
-
-  .home-logo-link img {
-    display: block;
-    height: 80px;
-    width: 80px;
-  }
+.home-logo-link img {
+  display: block;
+  height: 80px;
+  width: 80px;
+  margin-left: 10px;
 }
 
 .nav-links a.active-link {
-  // This border does not get applied to logo
-  // because of code in active-links.js file
   border-bottom: 3px solid lighten($turing-secondary, 25%);
 }
 
@@ -548,27 +539,14 @@ nav {
 
 @media (max-width: 850px) {
   .nav-links {
-    margin: 0 15px 15px 15px;
-    padding: 15px 0 0 0;
-    font-size: 1rem;
-    grid-template-columns: auto auto;
-    grid-template-rows: 45px 45px;
-    justify-items: right;
-
-    li {
-      grid-column: 2;
-      font-size: 13px;
-    }
-
-    li:first-child {
-      grid-column: 1;
-      grid-row: 1 / 5;
-    }
+    flex-direction: column;
+    align-items: end;
+    margin: 0px;
+  }
 
-    .home-logo-link img {
-      height: 70px;
-      width: 70px;
-    }
+  .home-logo-link img {
+    height: 70px;
+    width: 70px;
   }
 }