Merge pull request #3006 from abhijeetw035/abhijeet

Fixed Navbar Profile Icon Behaviour which was going down with page
anuragverma108 · Oct 6, 2024 · 65840c9 · 65840c9
2 parents dff6628 + fd87068
commit 65840c9
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -2798,7 +2798,7 @@ footer {
   .navbar-list {
     gap: 22px;
     /* Increase gap between navbar items */
-    justify-content: center;
+    justify-content: space-evenly;
     /* Center align navbar items */
     padding-left: 2rem;
   }

diff --git a/comsp.html b/comsp.html
@@ -334,7 +334,7 @@
       .menu ul li img {
         width: 20px;
         height: 20px;
-        margin-right: 10px;
+
       }
       .profile img {
         margin-bottom:100px;
@@ -384,11 +384,15 @@
      }
 
      .action {
-       position: fixed;
+       /* position: fixed */
        top: 43px;
        right: 83px;
+       display: flex;
+       justify-content: center;
+       align-items: center;
      }
 
+
      .action .profile {
        position: relative;
        width: 60px;
@@ -399,7 +403,7 @@
      }
 
      .action .profile img {
-      margin-right:100px;
+
        position: absolute;
        top: 0;
        left: 0;
@@ -504,6 +508,7 @@
          margin: 4px 4px;
          background-color: rgb(240, 15, 15);
      }
+
      @media only screen and (max-width:1063px){
          .nav{
              flex-direction: column;
@@ -650,15 +655,15 @@
 
   <header class="header header-anim" data-header>
 
-    <div class="container" style="padding-left: 0;">
-        <div>
-        <nav class="navbar nav_activated" data-navbar>
-            <a href="#home" onclick="lenis.scrollTo('#home');" class="logo" style="display:flex;">
+    <div class="container" style="padding-left: 0; width: 100%;">
+        <div style="width: 100%;">
+        <nav class="navbar nav_activated" data-navbar style="width: 100%;">
+            <a href="#home" onclick="lenis.scrollTo('#home');" class="logo" style="display:flex">
                 <img src="./assets/images/final.png" alt="" class="logopic"
                     style=" width:0.1px;opacity: 0;" />
             </a>
 
-            <ul class="navbar-list">
+            <ul class="navbar-list" style="width: 100%;">
                 <img src="./assets/images/final.png" class="logopic" style=" width: 200px;">
 
                 <li class="navbar-item">
@@ -731,8 +736,9 @@
                         </ul>
                     </div>
                 </li>
+
                 <div class="action">
-                  <div class="profile"style="margin-right:100px" onclick="menuToggle();">
+                  <div class="profile" onclick="menuToggle();">
                       <img id="profile-avatar" src="./assets/images/avatar1.jpg" />
                   </div>
                   <div class="menu">
@@ -748,7 +754,6 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
                   </div>
               </div>
 
-
                     <script>
                       document.addEventListener("DOMContentLoaded", () => {
                           const savedAvatar = localStorage.getItem("selectedAvatar");