Merge pull request #751 from YooAshu/gh-pages

fixed navbar issue in mobileView

Author: sanjay-kv

index.html

@@ -128,7 +128,7 @@ <h1 class="main-heading">Awesome GitHub Profile READMEs</h1>
           class="search-input"
           placeholder="Search Nickname or Username..."
         />
-        <i class="fas fa-search" style="position: relative;right: 40px;"></i>
+        <i class="fas fa-search" ></i>
         <i class="fa-solid fa-caret-down dropdown" id="caret-down"></i>
       </div>
       <!-- Modal Structure -->

styles/hamburger.css

@@ -21,7 +21,7 @@
   }
 
   .hamburger.active div:nth-child(1) {
-    transform: translateY(6px) rotate(45deg);
+    transform: translateY(14px) rotate(45deg);
   }
 
   .hamburger.active div:nth-child(2) {
@@ -38,7 +38,7 @@
     align-items: center;
     background-color: #ffffff;
     width: 100%;
-    position: absolute;
+    position: fixed;
     top: 52px;
     left: 0;
     opacity: 0;

styles/styles.css

@@ -1277,6 +1277,10 @@ a {
   position: relative;
   padding: 18px !important;
 }
+.fa-search{
+  position: relative;
+  right: 40px;
+}
 
 /* Media query for mobile view */
 @media (max-width: 768px) {
@@ -1293,8 +1297,23 @@ a {
     max-width: 90vw;
     font-size: 12px;  /* Adjust font size for smaller screens */
   }
+
+  .search-input{
+    padding-right: 35px;
+  }
+  .fa-search{
+    position: relative;
+    right: 35px;
+  }
+  .fa-caret-down.dropdown{
+    position: relative;
+    right: 15px;
+  }
 }
 
+
+
+
 .line.show{
   position: relative;
   /* bottom: -20px; */