Navbar alignment

index.html

@@ -19,19 +19,19 @@
     <div id="rectangle4"></div>
     <div id="rectangle5"></div>
     <div id="rectangle6"></div>
-    <div id="header-background"></div>
-    <img src="./resources/images/logo1.svg" id="logo1">
-    <i class="fa fa-2x fa-bars" id="bars" onclick="show_hide()"> </i>
-    <nav class="nav">
-
-        <div class="main-nav">
-            <ul>
-                <li><a href="./resources/html/aboutus.html">About us</a></li>
-                <li><a href="./resources/html/contactus.html">Contact us</a></li>    
-            </ul>
-        </div>
-        <li id="li3"><a id="try" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Try us out</a></li>
-    </nav>
+        <div id="header-background">
+            <nav class="nav">
+                <i class="fa fa-2x fa-bars" id="bars" onclick="show_hide()"> </i>
+            <img src="./resources/images/logo1.svg" id="logo1">
+            <div class="main-nav">
+                <ul>
+                    <li><a href="./aboutus.html">About us</a></li>
+                    <li><a href="./contactus.html">Contact us</a></li>
+                    <li id="li3"><a id="try" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Try us out</a></li>
+                </ul>
+            </div>
+        </nav>
+    </div>
 
     <div class="scroll-to-top" style="position: fixed; z-index: 100">
         <button id="scrollTOP">

resources/css/landingpage.css

@@ -9,7 +9,6 @@
 html,
 body {
     margin: 0px;
-    margin-top: 3px;
     width: 100%;
     font-family: 'Source Sans Pro';
 }
@@ -93,35 +92,32 @@ body {
     width: 100%;
     margin-bottom: 250px;
 }
-
 #header-background {
-    z-index: 100;
-    position: fixed; 
+    position: fixed;  /* Changed from absolute to fixed */
     width: 100%;
     height: 60px;
-    left: 0px;
-    top: 0px;
-    z-index: -1;
-    background: var(--navbar-bg);
+    left: 0;
+    top: 0;
     backdrop-filter: blur(32px);
+    background: rgba(255, 255, 255, 0.8);  /* Added for better blur effect */
 }
 
 nav {
-    position: fixed; 
-    top: 0; 
-    left: 0; 
-    width: 100%; 
-    z-index: 100;
+    position: fixed;  /* Changed to fixed */
+    top: 0;
+    left: 0;
+    width: 100%;
+    background: rgba(62, 95, 79, 0.4);
     display: flex;
-    flex-direction: row;
-    padding: 0% 0%;
+    padding: 10px 0;
     justify-content: space-between;
     align-items: center;
     height: 60px;
 }
 
 
 #logo1 {
+    padding-left: 60px;
     position: fixed; 
     left: 60px;
     height: 45px;
@@ -133,17 +129,18 @@ nav {
 .main-nav {
     flex: 1;
     text-align: right;
-    justify-content: right;
 }
 
-nav ul {
-    padding-right: 20px;
+.main-nav ul {
+    padding-right: 40px;
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
 }
 
 nav li {
     list-style: none;
-    display: inline-block;
-    padding: 0px 25px;
+    padding: 0px 20px;
     position: relative;
 }
 
@@ -172,17 +169,155 @@ nav li {
 #li3 {
     margin-right: 20px;
     list-style: none;
-    display: inline-block;
+    display: inline-flex;  /* Changed from inline-block */
+    align-items: center;
+    justify-content: center;
+    height: 36px;
+    width: 121px;
+    margin-left: 10px;
     padding: 8px 20px;
     position: relative;
     background: #01AF57;
+    border-radius: 3px;
 }
 
 nav li a {
     color: #1F2420;
     text-decoration: none;
 }
 
+#bars {
+    display: none;
+    cursor: pointer;
+    padding: 15px;
+    color: #1F2420;
+    position: fixed; 
+    right: 20px;
+    z-index: 2000;  
+}
+
+
+@media screen and (max-width: 768px) {
+    /* Header & Navigation */
+    #header-background {
+        z-index: 999;
+        position: fixed;
+        height: 60px;
+    }
+
+    nav {
+        z-index: 1000;
+        padding: 10px 0;
+    }
+
+    #logo1 {
+        padding-left: 15px;
+        height: 35px;
+    }
+
+    /* Hamburger Menu */
+    #bars {
+        display: block;
+        position: fixed;
+        right: 15px;
+        z-index: 2001;
+        cursor: pointer;
+        padding: 15px;
+        color: #1F2420;
+    }
+
+    /* Mobile Navigation Menu */
+    .main-nav {
+        position: fixed;
+        right: -100%;
+        top: 0;
+        background: rgba(62, 95, 79, 0.95);
+        height: 100vh;
+        width: 80%;  /* Changed to 80% for better UX */
+        padding-top: 60px;
+        transition: 0.3s ease-in-out;
+        z-index: 1000;
+    }
+
+    .main-nav.active {
+        right: 0;
+        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
+    }
+
+    .main-nav ul {
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
+        width: 100%;
+    }
+
+    .main-nav ul li {
+        padding: 12px 25px;
+        width: calc(100% - 50px);
+        text-align: left;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .main-nav ul li a {
+        color: #F6FFFA;
+        display: block;
+        width: 100%;
+    }
+
+    /* Menu Overlay */
+    .menu-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 998;
+        opacity: 0;
+        visibility: hidden;
+        transition: 0.3s ease-in-out;
+        display: none;
+    }
+
+    .menu-overlay.active {
+        opacity: 1;
+        visibility: visible;
+        display: block;
+    }
+
+    /* Content Containers */
+    .container1 {
+        margin-top: 80px;  /* Reduced to account for fixed header */
+        margin-bottom: 60px;
+    }
+
+    #box1, #box2 {
+        padding: 0 15px;
+        text-align: center;
+        word-wrap: break-word;
+        width: calc(100% - 30px);  /* Account for padding */
+    }
+
+    #box1 {
+        font-size: 24px;
+        margin-bottom: 15px;
+    }
+
+    #box2 {
+        font-size: 16px;
+    }
+
+    /* Try Us Out Button */
+    #li3 {
+        margin: 15px 25px;
+        width: calc(100% - 50px);
+        display: flex;
+        justify-content: center;
+    }
+}
+
+
+
 #try {
     color: #F6FFFA;
     background: #01AF57;

resources/javascript/menubutton.js

@@ -1,11 +1,38 @@
-var i = 0;
+// Add overlay div to the body
+const overlay = document.createElement('div');
+overlay.className = 'menu-overlay';
+document.body.appendChild(overlay);
 
 function show_hide() {
-    if (i == 1) {
-        document.querySelector('.main-nav').style.display = "flex";
-        return i = 0;
+    const nav = document.querySelector('.main-nav');
+    const bars = document.getElementById('bars');
+    const overlay = document.querySelector('.menu-overlay');
+
+    nav.classList.toggle('active');
+    overlay.classList.toggle('active');
+
+    // Prevent body scroll when menu is open
+    if (nav.classList.contains('active')) {
+        document.body.style.overflow = 'hidden';
     } else {
-        document.querySelector('.main-nav').style.display = "none";
-        return i = 1;
+        document.body.style.overflow = '';
     }
-}
+}
+
+// Close menu when clicking overlay
+document.querySelector('.menu-overlay').addEventListener('click', () => {
+    const nav = document.querySelector('.main-nav');
+    if (nav.classList.contains('active')) {
+        show_hide();
+    }
+});
+
+// Close menu when clicking a link
+document.querySelectorAll('.main-nav a').forEach(link => {
+    link.addEventListener('click', () => {
+        const nav = document.querySelector('.main-nav');
+        if (nav.classList.contains('active')) {
+            show_hide();
+        }
+    });
+});