Merge pull request #397 from Hemraj-7/stark

Fixed issue #381

Js/script.js

@@ -7,9 +7,16 @@ burger.addEventListener('click', ()=>{
     rightNav.classList.toggle('visibility');
     navList.classList.toggle('visibility');
     navbar.classList.toggle('h-nav');
-
 })
 
+function handleLink(){
+    if (window.innerWidth < 1020) {
+        rightNav.classList.toggle('visibility');
+        navList.classList.toggle('visibility');
+        navbar.classList.toggle('h-nav');
+    }
+}
+
 const currentYear = new Date().getFullYear();
 document.getElementById('year').textContent = currentYear;
 
@@ -18,24 +25,6 @@ document.getElementById('ironmask').addEventListener('click', () => {
     document.getElementById('home').scrollIntoView({ behavior: 'smooth'});
 });
 
-// Add this function to handle section navigation
-function scrollToSection(event, sectionId) {
-    const isComicsLink = sectionId === 'Comics.html'; // Check if it's the Comics link
-    if (isComicsLink) {
-        // Let the default behavior happen (navigate to Comics.html)
-        return;
-    }
-
-    event.preventDefault();
-    const section = document.getElementById(sectionId);
-    const navbarHeight = 85; // Fixed navbar height
-
-    window.scrollTo({
-        top: section.offsetTop - navbarHeight,
-        behavior: 'smooth'
-    });
-}
-
 //highlight functionality
 window.addEventListener('scroll', () => {
     const sections=document.querySelectorAll('section');

index.html

@@ -147,15 +147,13 @@
 
     <nav class="navbar h-nav background">
         <ul class="nav-list visibility">
-            <div class="logo" id="ironmask" ><a href="/index.html"><img src="assets\logo\icon.png"   alt="logo" srcset=""></a></div>
-            <li id="nav-home"> <a href="#home" class="active-header"  onclick="scrollToSection(event, 'home')" >Home</a></li>
-            <li id="nav-about"> <a href="#about" onclick="scrollToSection(event, 'about')">About</a></li>
-            <li id="nav-appearances"> <a href="Appearances.html">Appearances</a></li>
-            <li id="nav-comics"> <a href="Comics.html">Comics</a></li>
-            <li id="nav-contact"> <a href="#contact">Contact</a></li> 
-             <!-- <li> <a href="#subscribe" onclick="scrollToSection(event, 'subscribe')">Subscribe </a></li> -->
-            <li> <a href="/blog.html">Blogs</a></li>
-
+            <div onclick="handleLink()" class="logo" id="ironmask" ><a href="./index.html"><img src="assets\logo\icon.png"   alt="logo" srcset=""></a></div>
+            <li onclick="handleLink()"> <a href="#home" class="active-header">Home</a></li>
+            <li onclick="handleLink()"> <a href="#about">About</a></li>
+            <li onclick="handleLink()"> <a href="Appearances.html">Appearances</a></li>
+            <li onclick="handleLink()"> <a href="./Comics.html">Comics</a></li>
+            <li onclick="handleLink()"> <a href="#contact">Contact</a></li> 
+            <li onclick="handleLink()"> <a href="./blog.html">Blogs</a></li> 
         </ul>
 
         <div class="rightNav visibility">

style.css

@@ -5,6 +5,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  scroll-behavior: smooth;
 }
 
 html,