Made menu responsive

css/style.css

@@ -1,10 +1,16 @@
+:root {
+  --main-bg-color: #121E2A;
+  --main-text-color: #fff;
+  --secondary-bg-color: #f4f4f4;
+}
+
 /* General Body Styling */
 body {
   font-family: 'Arial', sans-serif;
   margin: 0 auto;
   max-width: 1581px;
   padding: 0;
-  background-color: #f4f4f4; /* Light grey background */
+  background-color: var(--secondary-bg-color);
 }
 
 /* Container */
@@ -16,22 +22,21 @@ body {
 
 /* Header */
 .header {
-  background: #121E2A;
+  background: var(--main-bg-color);
-  color: #fff;
+  color: var(--main-text-color);
   padding-top: 30px;
   min-height: 70px;
-  border-bottom: #f4f4f4 3px solid;
+  border-bottom: var(--secondary-bg-color) 3px solid;
 }
 
 .header a {
-  color: #fff;
+  color: var(--main-text-color);
   text-decoration: none;
   text-transform: uppercase;
   font-size: 16px;
 }
 
 /* logo */
-
 .logo {
   float: left;
   display: block;
@@ -57,10 +62,18 @@ body {
   margin-left: 35px;
 }
 
+.menu a:hover {
+  text-decoration: underline;
+}
+
+.menu a.active {
+  text-decoration: underline;
+}
+
 /* Banner */
 .banner {
   position: relative;
-  background: #121E2A no-repeat center center;
+  background: var(--main-bg-color) no-repeat center center;
   background-size: contain;
 }
 
@@ -75,17 +88,13 @@ body {
 /* Main Content */
 .main {
   padding: 20px;
-  background: #fff;
+  background: var(--main-text-color);
-}
-
-.main h1 {
-  color: #333;
 }
 
 /* Footer */
 .footer {
-  background: #121E2A;
+  background: var(--main-bg-color);
-  color: #fff;
+  color: var(--main-text-color);
   text-align: center;
   padding: 30px 0;
   overflow: hidden; /* Clear the float */
@@ -114,33 +123,27 @@ body {
 }
 
 .footer ul li a {
-  color: #fff;
+  color: var(--main-text-color);
 }
 
 /* Media Queries */
 @media (max-width: 768px) {
   .menu {
+    float: none;
+    width: 120px;
+    margin: auto;
+    padding-left: 0px;
+    padding-right: 0px;
     margin-right: 0px;
+    margin-top: -25px;
   }
 
   .menu ul {
-    padding: 0;
+    line-height: 1.5;
-    background-color: #333;
-    text-align: center;
   }
 
   .menu ul li {
-    display: block; /* Stack the menu items vertically */
+    margin-left: 0px;
-    margin: 0; /* Remove margin */
-  }
-  
-  .menu ul li a {
-    display: block; /* Block level links take up the full width of their container */
-    padding: 10px; /* Add padding for touch targets */
-  }
-
-  .container {
-    width: 100%;
   }
  
   .header, .footer {
@@ -155,9 +158,3 @@ body {
     padding-right: 0px;
   }  
 }
-
-@media (max-width: 480px) {
-  .menu ul li {
-    padding: 5px; /* Adjust padding for smaller screens */
-  }
-}

index.html

@@ -18,7 +18,7 @@
         <!-- menu -->
       <div class="menu">
           <ul>
-            <li><a href="index.html">Home</a></li>
+            <li><a href="index.html" class="active">Home</a></li>
             <li><a href="services.html">Services</a></li>
             <li><a href="about.html">About Us</a></li>
             <li><a href="contact.html">Contact Us</a></li>