From 437f0a2668dbd80ceb3fe977e6cf2bcf4bb61981 Mon Sep 17 00:00:00 2001
From: abyy <128166822+Roxana808@users.noreply.github.com>
Date: Tue, 14 May 2024 11:43:16 -0500
Subject: [PATCH] changed the navbar positioning, as well as overlapping issues

---
 index.html | 24 +++++++++++++++++++++---
 style.css  | 34 +++++++++++++++++++++++++---------
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index e7adf36..b2627e1 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,7 @@
                 <img src="./assets/asset 1.png" alt="company logo">
             </a>
             <div class="nav-links" id="nav-links">
-                <ul class="flex">
+                <ul class="flex navabar-tabs">
                     <li><a href="#" class="hover-link">Products</a></li>
                     <li><a href="#" class="hover-link">Customer</a></li>
                     <li><a href="#" class="hover-link">Pricing</a></li>
@@ -247,12 +247,30 @@ <h4>Resources</h4>
     <script>
         const toggleButton = document.getElementById('nav-toggle');
         const navLinks = document.getElementById('nav-links');
+        // const navbartabs = document.getElementById('navbar-tabs');
+        // console.log(navbartabs);
+        
 
         toggleButton.addEventListener('click', () => {
+            navLinks.style.width = '100vw';
             navLinks.classList.toggle('active');
-        })
+        });
+
+        window.addEventListener('scroll',function() {
+            var topBanner = document.querySelector('.top-banner');
+            var topBannerH = topBanner.offsetHeight;
+            var navBar = document.querySelector('.main-nav');
+
+            if(window.scrollY >= topBannerH){
+                console.log('should move to the top');
+                navBar.classList.add('main-nav-sticky');
+            }
+            else{
+                navBar.classList.remove('main-nav-sticky');
+            }
+        });
 
     </script>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/style.css b/style.css
index c2854c6..cdf5619 100644
--- a/style.css
+++ b/style.css
@@ -49,6 +49,7 @@ ul {
     list-style: none;
 }
 
+
 /* utility classes */
 
 .small-bold-text {
@@ -116,6 +117,7 @@ ul {
     background-image: url('asset\ 30.png');
     background-color: #4fb3d4;
     background-size: 300px;
+    height:50px;
 }
 
 .banner-text {
@@ -125,18 +127,20 @@ ul {
 }
 
 /* nav bar */
-
 .main-nav {
-    margin-top: 40px;
     justify-content: space-between;
+    position:flex;
+   min-width:100vw;
+    background-color: #ccc;
+    transition: all 0.3s ease;
+}
 
-    position: fixed;
-    top: 0;
-    width: 100%;
-    padding: 10px 0;
-    margin-left: 50px;
-
-    background-color: #ccc
+.main-nav-sticky{
+    position:fixed;
+    top:0;
+    left:0;
+    right:0;
+    z-index: 1000;
 }
 
 .company-logo img {
@@ -197,6 +201,7 @@ ul {
 @media screen and (max-width: 768px) {
     .nav-links {
         display: none;
+        width: 100vw;
     }
 
     .nav-toggle {
@@ -206,12 +211,22 @@ ul {
     .nav-links.active {
         display: block;
     }
+
+    .nav-links ul{
+        display:flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 0;
+        margin: 0;
+        list-style: none;
+    }
 }
 
 
 /* header section */
 
 header {
+    /* margin-top: 30px; */
     padding: 50px var(--padding-inline-section) 0;
 }
 
@@ -277,6 +292,7 @@ header {
     justify-content: space-between;
     gap: 20px;
     margin-top: 20px;
+    margin-bottom: 20px;
 }
 
 .features-card {