Issue#222 - Navigation Bar (#299)

* Disabled the shadow-box property for the hamburger navigation icon. * Fixed the dropdown menus so it no longer overlaps. * Added more padding for dropdown list items. * Fixed the menu navigation bar so it no longer moves when clicking the hamburger icon. * Fixed misaligned ribbon under the navigation bar. * Fixed the navigation bar expanding past the ribbon.
SpeakingInBits · Apr 29, 2024 · 47b1d5f · 47b1d5f
1 parent 4f65a3c
commit 47b1d5f
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 45 deletions.
diff --git a/PC2/Views/Shared/_Layout.cshtml b/PC2/Views/Shared/_Layout.cshtml
@@ -161,7 +161,7 @@ cfg: { // Application Insights Configuration
                                 </ul>
                             </div>
                         </li>
-                        <li class="nav-item menu-item dropdown" >
+                        <li id="housing-program" class="nav-item menu-item dropdown" >
                             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown2" aria-controls="navbarNavDarkDropdownHousing" aria-expanded="false" aria-label="Toggle Housing Program navigation">
                                 <span class="navbar-toggler-icon d-none"></span>
                             </button>

diff --git a/PC2/wwwroot/css/site.css b/PC2/wwwroot/css/site.css
@@ -12,9 +12,9 @@ a.navbar-brand {
     text-decoration: none;
 }
 
-.name:hover {
-    text-decoration: none;
-}
+    .name:hover {
+        text-decoration: none;
+    }
 
 /*Overriding the color settings for login/logout*/
 .nav-link {
@@ -39,12 +39,6 @@ html {
     font-size: 14px;
 }
 
-@media (min-width: 768px) {
-    html {
-        font-size: 16px;
-    }
-}
-
 .border-top {
     border-top: 1px solid #e5e5e5;
 }
@@ -206,6 +200,11 @@ ul.navbar-nav, .dropdown-item {
     margin: 0 auto;
 }
 
+.navbar-nav .dropdown-menu {
+    position: absolute;
+    border: 2px solid black;
+}
+
 nav .container {
     padding: 0;
 }
@@ -215,7 +214,7 @@ nav .container {
     border: none;
     border-radius: 0;
     outline: none;
-    padding: 0;
+    padding-inline: 0;
 }
 
 #menu-bar {
@@ -244,8 +243,11 @@ nav .container {
     padding: 17px;
 }
 
+.navbar-toggler:focus {
+    box-shadow: none;
+}
+
 #bootstrap-override .menu-item a {
-    padding: 8px 0 8px 0;
     font-size: 17px;
 }
 
@@ -261,7 +263,6 @@ nav .container {
 .menu-item {
     height: 60px;
     display: inline-flex;
-    padding: 12px 10px 12px 10px;
     position: relative;
     align-items: center;
 }
@@ -273,21 +274,21 @@ nav .container {
         -webkit-transition: background-color .4s ease 0s;
         -moz-transition: background-color .4s ease 0s;
     }
-    /*changes text color to provide contrast*/
-    .nav-link:hover {
-        color: black !important;
-        transition: background-color .4s ease 0s;
-        -webkit-transition: background-color .4s ease 0s;
-        -moz-transition: background-color .4s ease 0s;
-    }
+/*changes text color to provide contrast*/
+.nav-link:hover {
+    color: black !important;
+    transition: background-color .4s ease 0s;
+    -webkit-transition: background-color .4s ease 0s;
+    -moz-transition: background-color .4s ease 0s;
+}
 
 nav a {
     padding: 10px;
 }
 
 .ribbon {
     position: absolute;
-    bottom: -50px;
+    bottom: -51px;
     height: 0;
     width: 0;
     border: 25px solid transparent;
@@ -359,27 +360,13 @@ nav a {
     display: block;
 }*/
 
-/*min-width should match the breakpoint for <nav>*/
-@media only screen and (min-width: 992px) {
+@media (min-width: 768px) {
     html {
         font-size: 16px;
     }
 
-    #pc2Logo {
-        padding-bottom: 1em;
-    }
-
-    #menu-bar * {
-        width: 0;
-    }
-
-    #menu-bar *, .submenu-container * {
-        display: none;
-    }
-
-    /*top border shows even when display is set to none*/
-    .submenu {
-        border: none;
+    .ribbon {
+        bottom: -52px;
     }
 }
 
@@ -448,8 +435,40 @@ nav a {
         margin-bottom: 0;
     }
 
-    .left-column ul {
-        margin-bottom: 0;
+        .left-column ul {
+            margin-bottom: 0;
+        }
+
+    #Resources-Index, #housing-program, #about-menu {
+        padding-left: 12px;
+    }
+}
+
+/*min-width should match the breakpoint for <nav>*/
+@media only screen and (min-width: 992px) {
+    html {
+        font-size: 16px;
+    }
+
+    #pc2Logo {
+        padding-bottom: 1em;
+    }
+
+    #menu-bar * {
+        width: 0;
+    }
+
+    #menu-bar *, .submenu-container * {
+        display: none;
+    }
+
+    /*top border shows even when display is set to none*/
+    .submenu {
+        border: none;
+    }
+
+    .ribbon {
+        bottom: -50px;
     }
 }
 
@@ -545,10 +564,11 @@ main p {
     float: left;
 }
 
-.left-column ul, .right-column ul {
-    padding: 0;
-}
+    .left-column ul, .right-column ul {
+        padding: 0;
+    }
 
 li {
-    padding-bottom: 1em;
-}
+    padding-bottom: .5em;
+    padding-top: .5em;
+}