Align the navbar to meet the design system requirement

Author: Dev-JoyA

webpack/sass/main.scss

@@ -106,6 +106,76 @@ pre {
   }
 }
 
+//Adjusting and properly aligning the Navbar
+.navbar {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center;
+  width: 100% !important;
+  padding: 1rem; 
+  position: relative;
+  z-index: 1;
+}
+
+.navbar-brand{
+  width: 100% !important;
+}
+
+
+.navbar-burger {
+  margin-left: auto !important; 
+  cursor: pointer;
+  display: inline-block;
+  height: 2.25rem;
+  width: 2.25rem;
+  position: relative;
+}
+
+.navbar-burger span {
+  background-color: currentColor;
+  display: block;
+  height: 2px;
+  width: 24px;
+  margin: 5px auto;
+  transition: background-color 0.3s ease-in-out;
+}
+
+
+.navbar-burger.is-active span {
+  background-color: red; 
+}
+
+
+.navbar-menu {
+  display: none;
+  flex-direction: column; 
+  position: absolute; 
+  top: 100%; 
+  right: 0; 
+  background-color: white; 
+ 
+}
+
+
+.navbar-menu.is-active {
+  display: flex;
+  margin-bottom: 5rem;
+}
+
+
+.navbar-end {
+  display: flex;
+  flex-direction: column; 
+
+}
+
+.navbar-item {
+  padding: 1rem;
+  width: 100%;
+  text-align: center;
+}
+
+
 // Breadcrumb
 .breadcrumb-container {
   border-top: 4px solid $color-forest-green;