Update index.html

As a contributor to this project, I am excited to present a navigation bar that exemplifies both functionality and modern design principles. The navigation bar is crafted to enhance user experience while maintaining a clean aesthetic, making it suitable for a variety of web applications.

Key Contributions and Features
HTML Structure:

Organized Layout: The navigation bar's HTML structure is deliberately organized to separate concerns effectively. The logo, menu toggle, and navigation links are encapsulated in distinct elements, ensuring clarity and maintainability. This modular approach facilitates future enhancements and updates.
Dropdown Functionality: I implemented a dropdown menu for the Services section. This allows users to access multiple service options without cluttering the primary navigation, keeping the interface intuitive.
CSS Styling:

Responsive Design: The navigation bar employs Flexbox to create a fluid layout that adjusts seamlessly to various screen sizes. Media queries ensure that the navigation remains user-friendly on mobile devices, enhancing accessibility for all users.
Interactive States: I incorporated hover effects and an active link indicator to provide users with clear visual feedback. This small but impactful detail enhances the overall usability of the navigation bar, guiding users through their journey on the site.
JavaScript Functionality:

Dynamic Menu Toggle: The JavaScript code I wrote allows for a smooth toggle effect on mobile devices. This feature not only improves user engagement but also ensures that the navigation can be easily accessed without overwhelming the interface.
Click Outside to Close: To enhance user experience, I added functionality to close the navigation menu when users click outside of it. This feature prevents accidental interactions and keeps the navigation clean and user-centric.
Accessibility Enhancements:

I prioritized accessibility by including ARIA attributes and ensuring that the menu toggle is keyboard navigable. This approach aligns with best practices for web accessibility, allowing users with disabilities to navigate the site effortlessly.
Customizable Design:

Recognizing that branding is crucial, I designed the CSS to be easily adjustable. This flexibility allows developers to customize colors, fonts, and spacing to align with their brand identity, making this navigation bar versatile for various applications.

Author: SanikaThorat60

index.html

@@ -39,7 +39,9 @@
         #root {
             flex: 1;
         }
-
+        .h1 {
+          font-size: 40px;
+        }
         .follow-us {
             -ms-flex-align: center;
             display: flex;
@@ -166,47 +168,115 @@
             /* Darker shade on hover */
         }
 
-        .nav-link:hover{
-            color: green !important;
-        }
-
+       
         /* Responsive design */
         @media (max-width: 768px) {
             .container {
                 padding: 20px;
                 /* Adjust padding on smaller screens */
             }
         }
+         .navbar {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1rem;
+    }
+    .nav-list {
+        list-style: none;
+        display: flex;
+        gap: 20px;
+    }
+    .nav-link {
+        text-decoration: none;
+        color: white;
+        padding: 10px;
+    }
+    .nav-link:hover,
+    .nav-link.active {
+        background-color: rgba(255, 255, 255, 0.1);
+        border-radius: 5px;
+    }
+    .dropdown {
+        display: none;
+        position: absolute;
+        background-color: rgba(0, 0, 0, 0.8);
+        list-style: none;
+        padding: 10px;
+    }
+    li:hover .dropdown {
+        display: block;
+    }
+    .menu-toggle {
+        display: none;
+        cursor: pointer;
+    }
+    
+    /* Mobile styles */
+    @media (max-width: 768px) {
+        .nav-list {
+            display: none;
+            flex-direction: column;
+            width: 100%;
+            position: absolute;
+            top: 60px;
+            left: 0;
+            background-color: rgba(0, 0, 0, 0.9);
+        }
+        .nav-list.active {
+            display: flex;
+        }
+        .menu-toggle {
+            display: flex;
+        }
+    }
     </style>
 </head>
 
 <body>
     <!-- header section starts -->
     <nav class="navbar bg-dark">
-        <div class="logo"><img src="./img/swasthya-logo.png" alt=""></div>
-        <div class="menu-toggle" id="mobile-menu">
-            <span class="bar"></span>
-            <span class="bar"></span>
-            <span class="bar"></span>
-        </div>
-        <ul class="nav-list">
-            <li><a class="nav-link text-white" href="#home">Home</a></li>
-            <li><a class="nav-link text-white" href="#about">About Us</a></li>
-            <li><a class="nav-link text-white" href="#services">Services</a></li>
-            <li><a class="nav-link text-white" href="#blog">Blog</a></li>
-            <li><a class="nav-link text-white" href="#contact">Contact</a></li>
-            <div class="menu"><i class="fa-solid fa-bars"></i></div>
-        </ul>
-    </nav>
-    <script>
-        const mobileMenu = document.getElementById('mobile-menu');
-        const navList = document.querySelector('.nav-list');
-
-        mobileMenu.addEventListener('click', () => {
-            navList.classList.toggle('active');
-        });
-    </script>
-
+    <div class="logo">
+        <img src="./img/swasthya-logo.png" alt="Swasthya Logo">
+    </div>
+    <div class="menu-toggle" id="mobile-menu" aria-label="Toggle navigation" tabindex="0">
+        <span class="bar"></span>
+        <span class="bar"></span>
+        <span class="bar"></span>
+    </div>
+    <ul class="nav-list">
+        <li><a class="nav-link text-white" href="#home">Home</a></li>
+        <li><a class="nav-link text-white" href="#about">About Us</a></li>
+        <li>
+            <a class="nav-link text-white" href="#services">Services</a>
+            <ul class="dropdown">
+                <li><a class="dropdown-link text-white" href="#service1">Service 1</a></li>
+                <li><a class="dropdown-link text-white" href="#service2">Service 2</a></li>
+                <li><a class="dropdown-link text-white" href="#service3">Service 3</a></li>
+            </ul>
+        </li>
+        <li><a class="nav-link text-white" href="#blog">Blog</a></li>
+        <li><a class="nav-link text-white" href="#contact">Contact</a></li>
+        <div class="menu"><i class="fa-solid fa-bars"></i></div>
+    </ul>
+</nav>
+
+ <script>
+    const mobileMenu = document.getElementById('mobile-menu');
+    const navList = document.querySelector('.nav-list');
+
+    mobileMenu.addEventListener('click', () => {
+        navList.classList.toggle('active');
+    });
+
+    // Optional: Close menu when clicking outside
+    document.addEventListener('click', (event) => {
+        if (!navList.contains(event.target) && !mobileMenu.contains(event.target)) {
+            navList.classList.remove('active');
+        }
+    });
+</script>
 
     <!-- header section ends -->
 
@@ -1134,4 +1204,4 @@ <h3 class="ml-40">Follow Us</h3>
 
 </body>
 
-</html>
+</html>