jun 18

style/_nav.scss

@@ -1,12 +1,12 @@
 @import '_variables';
 
 
-.form-search{
+.form-search {
     width: 380px;
-    height: 40px ;
+    height: 40px;
 }
 
-.socials-ul{
+.socials-ul {
     display: none;
 }
 
@@ -19,21 +19,20 @@ nav {
 
 .navbar {
     padding: 0 !important;
-    height: 40px ;
+    height: 40px;
 }
 
 .form-container {
     padding: 0;
-    
+
 }
 
 
 .btn span {
-    padding-top: 10px;
     color: $lightblue;
     width: 30px;
     height: 30px;
-    
+
 }
 
 .btn span:hover {
@@ -47,7 +46,7 @@ nav {
 
 input {
     color: white !important;
-    
+
 }
 
 #src-input {
@@ -59,7 +58,7 @@ input::placeholder {
     color: white !important;
 }
 
-.phone{
+.phone {
     color: #333333;
     font-family: $numberfont;
     font-weight: 900;
@@ -70,13 +69,14 @@ input::placeholder {
     text-decoration: none;
 }
 
-.phone:hover{
+.phone:hover {
     color: $lightblue;
     transition: 0.5s;
     text-decoration: none;
 
 }
-#phone-img{
+
+#phone-img {
     width: 22px;
     height: 33px;
 }
@@ -95,15 +95,16 @@ input::placeholder {
     font-size: 14px;
 }
 
-.logo-img{
-    cursor:pointer;
+.logo-img {
+    cursor: pointer;
 }
 
-.dropdown{
+.dropdown {
 
     top: 22%;
     right: 10px;
 }
+
 // .register{
 //     .register-link{
 //         color: #15c1c6;
@@ -118,32 +119,36 @@ input::placeholder {
 // }
 
 @media only screen and (min-width: 768px) {
-    .dropdown{
+    .dropdown {
         position: absolute;
         top: 7px;
         left: 20px;
     }
-    
-    .form-search{
+
+    .form-search {
         width: 229px !important;
         background-color: #4a4e55;
         padding-left: 34px;
-        padding-right: 15px;        
-        
-    } 
-    .form-container{
+        padding-right: 15px;
+
+    }
+
+    .form-container {
         padding-left: 0 !important;
         padding-right: 15px !important;
     }
-    .navbar{
+
+    .navbar {
         background-color: #30343c;
         height: 50px;
-        
+
     }
+
     #src-input {
         padding-left: 0px;
     }
-    #socials{
+
+    #socials {
         height: 28px !important;
         width: 28px !important;
         margin-top: 0 !important;
@@ -153,32 +158,27 @@ input::placeholder {
         justify-content: center;
 
     }
-    .horizontal-menu{
+
+    .horizontal-menu {
         border-top: 1px solid #efefef;
 
     }
 
-    .nav-ul-hor{
+    .nav-ul-hor {
         width: 100%;
         cursor: pointer;
         color: #333333;
-        font-family: Lato, sans-serif; 
+        font-family: Lato, sans-serif;
         font-weight: 900;
         font-style: normal;
         text-transform: uppercase;
         list-style-type: none;
         padding-left: 16px !important;
-        
 
-        .navs{
+
+        .navs {
             padding: 1rem;
-            color: #333333 ;
-            // .hor-navs-a{
-            //     color: #333333;
-            // }
-            // .hor-navs-a:hover{
-            //     color:white !important;
-            // }
+            color: #333333;
         }
 
         .navs:hover {
@@ -186,41 +186,125 @@ input::placeholder {
             color: white;
             transition: 0.3s;
         }
-        
+
     }
-    
+
 }
 
 @media only screen and (min-width: 992px) {
-    .dropdown{
+    .dropdown {
         position: absolute;
         left: 5%;
         top: 10px;
     }
-    .navbar{
+
+    .navbar {
         height: 60px;
     }
-    .form-search{
+
+    .form-search {
         margin-left: 55px;
         margin-right: 72px;
+        margin-bottom: 0px;
 
     }
-    .horizontal-menu{
+
+    .horizontal-menu {
         border-top: none !important;
+
+        .dropdown-ul-2 {
+            display: none;
+            position: absolute;
+        }
+
+        #li-home:hover .dropdown-ul-2 {
+            display: flex;
+            flex-direction: column;
+            left: 26%;
+            top: 18%;
+            z-index: 99;
+            font-size: .875rem;
+            a{
+                text-decoration: none;
+            }
+            li{
+                padding: 1em 19px;
+                width: 15em;
+                background-color: #15c1c6;
+                list-style: none;
+                text-transform: uppercase;
+                color: white;
+                border-bottom: 1px solid white;
+            }
+            li:hover{
+                color: #30343c;
+                transition: 0.3s;
+            }
+        }
+
+        #li-people:hover .dropdown-ul-2 {
+            display: flex;
+            flex-direction: column;
+            left: 30%;
+            top: 18%;
+            z-index: 99;
+            font-size: .875rem;
+            a{
+                text-decoration: none;
+            }
+            li{
+                padding: 1em 19px;
+                width: 15em;
+                background-color: #15c1c6;
+                list-style: none;
+                text-transform: uppercase;
+                color: white;
+                border-bottom: 1px solid white;
+            }
+            li:hover{
+                color: #30343c;
+                transition: 0.3s;
+            }
+        }
+
+        #li-about:hover .dropdown-ul-2 {
+            display: flex;
+            flex-direction: column;
+            left: 37%;
+            top: 18%;
+            z-index: 99;
+            font-size: .875rem;
+            a{
+                text-decoration: none;
+            }
+            li{
+                padding: 1em 19px;
+                width: 15em;
+                background-color: #15c1c6;
+                list-style: none;
+                text-transform: uppercase;
+                color: white;
+                border-bottom: 1px solid white;
+            }
+            li:hover{
+                color: #30343c;
+                transition: 0.3s;
+            }
+        }
     }
 
-    .navs{
+    .navs {
         padding: 45px 22px !important;
 
     }
 
-    header{
+    header {
         padding: 0 96px !important;
     }
 
-    .logo-img{
+    .logo-img {
         width: 174px;
         height: 39px;
-        cursor:pointer;
+        cursor: pointer;
     }
 }