header responsive updated

components/layout/Menu.js

@@ -28,7 +28,7 @@ export default function Menu() {
                         <li><Link href="/our-team-physiotherapy-etobicoke">Our Team</Link></li>
                         <li><Link href="/ourapproach-physiotherapy-etobicoke">Our Approach</Link></li>
                         <li><Link href="/gallery-physiotherapy-etobicoke">Gallery</Link></li>
-                        {/* <li><Link href="/service-details-3">Neurosurgery</Link></li> */}
+                        <li><Link href="/covid-19-updates">Covid-19-Updates</Link></li>
                     </ul>
                 </li>
                 <li className="dropdown"><Link href="/">Services</Link>

components/layout/header/Header2.js

@@ -14,14 +14,17 @@ export default function Header2({ scroll, isMobileMenu, handleMobileMenu, isSide
                     <div className="top-inner">
                         <ul className="info-list clearfix">
                             <li>
-                                <img src="/assets/images/icons/icons-17.png" alt="Phone" style={{ marginRight: "8px" }} />
+                                <img src="/assets/images/icons/call.png" alt="Phone" style={{ marginRight: "8px" }} />
                                 <Link href="tel:647-722-3434">647-722-3434</Link>
                             </li>
                             <li>
-                                <img src="/assets/images/icons/icons-19.png" alt="Mail" style={{ marginRight: "8px" }} />
+                                <img src="/assets/images/icons/mail.png" alt="Mail" style={{ marginRight: "8px" }} />
                                 <Link href="mailto:info@rapharehab.ca">info@rapharehab.ca</Link>
                             </li>
 
+                        </ul>
+
+                        <ul className="social-links clearfix">
                             <li>
                                 <Link href="/why-rapha-physiotherapy-etobicoke">Why Us</Link>
                             </li>
@@ -34,9 +37,6 @@ export default function Header2({ scroll, isMobileMenu, handleMobileMenu, isSide
                             <li>
                                 <Link href="/payment-insurance">Payment And Insurance</Link>
                             </li>
-                        </ul>
-
-                        <ul className="social-links clearfix">
                             <li><Link href="/"><i className="icon-4"></i></Link></li>
                             <li><Link href="/"><i className="icon-5"></i></Link></li>
                             <li><Link href="/"><i className="icon-6"></i></Link></li>

public/assets/css/style.css

@@ -853,92 +853,165 @@ img {
 }
 
 /** header-top **/
-
-.header-top{
+.header-top {
   position: relative;
   width: 100%;
   background: #bc0000;
-  padding: 15.5px 0px;
+  padding: 15.5px 0;
 }
 
-.header-top .top-inner{
+.header-top .top-inner {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: nowrap; 
+  gap: 15px; 
+  overflow-x: auto; 
 }
 
-.header-top .top-inner .info-list li{
-  position: relative;
+.header-top .top-inner .info-list {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 30px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.header-top .top-inner .info-list li {
+  display: flex;
+  align-items: center;
+  color: #fff;
+  gap: 2px;
+  white-space: nowrap; 
+}
+
+.header-top .top-inner .info-list li img {
+  width: 18px;
+  height: auto;
+}
+
+.header-top .top-inner .info-list li a {
   display: inline-block;
   color: #fff;
-  padding-left: 28px;
-  margin-right: 50px;
+  font-size: 15px;
+  text-decoration: none;
 }
 
-@media only screen and (max-width: 1440px) {
-.header-top .top-inner .info-list li{
-  position: relative;
-  display: inline-block;
-  color: #fff;
-  padding-left: 28px;
-  margin-right: 25px;
-}
+@media only screen and (max-width: 500px) {
+  .header-top .top-inner .info-list li a {
+    font-size: 12px;
+  }
 }
 
-
-@media only screen and (max-width: 1024px) {
-.header-top .top-inner .info-list li{
-  position: relative;
-  display: inline-block;
-  color: #fff;
-  padding-left: 28px;
-  margin-right: 25px;
-}
+@media only screen and (max-width: 320px) {
+  .header-top .top-inner .info-list li a {
+    font-size: 11px;
+  }
 }
 
-.header-top .top-inner .info-list li:last-child{
-  margin: 0px !important;
-}
-
-.header-top .top-inner .info-list li i{
-  position: absolute;
-  left: 0px;
-  top: 6px;
-  font-size: 18px;
-  color: #fff;
-}
-
-.header-top .top-inner .info-list li a{
-  display: inline-block;
-  color: #fff;
-}
-
-.header-top .top-inner .info-list li a:hover{
+.header-top .top-inner .info-list li a:hover {
   color: var(--secondary-color);
 }
 
-.header-top .top-inner .social-links li{
-  position: relative;
+.header-top .top-inner .social-links {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: nowrap; 
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.header-top .top-inner .social-links li {
   display: inline-block;
-  float: left;
-  margin-right: 30px;
 }
 
-.header-top .top-inner .social-links li:last-child{
-  margin: 0px !important;
-}
-
-.header-top .top-inner .social-links li a{
+.header-top .top-inner .social-links li a {
   display: inline-block;
   font-size: 16px;
   color: #fff;
+  transition: color 0.3s ease;
 }
 
-.header-top .top-inner .social-links li a:hover{
+@media only screen and (max-width: 500px) {
+  .header-top .top-inner .social-links li a {
+    font-size: 11px;
+  }
+}
+
+@media only screen and (max-width: 320px) {
+  .header-top .top-inner .social-links li a {
+    font-size: 9px;
+  }
+}
+
+
+.header-top .top-inner .social-links li a:hover {
   color: var(--secondary-color);
 }
 
+@media only screen and (max-width: 1024px) {
+  .header-top .top-inner {
+    gap: 10px;
+  }
+
+  .header-top .top-inner .info-list {
+    gap: 15px;
+  }
+
+  .header-top .top-inner .social-links {
+    gap: 15px;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .header-top {
+    padding: 12px 10px;
+  }
+
+  .header-top .top-inner {
+    flex-direction: column; 
+    align-items: center;
+    text-align: center;
+    gap: 8px;
+  }
+
+  .header-top .top-inner .info-list {
+    justify-content: center;
+    gap: 20px;
+  }
+
+  .header-top .top-inner .social-links {
+    justify-content: center;
+    gap: 20px;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .header-top .top-inner .social-links {
+    justify-content: center;
+    gap: 12px;
+  }
+}
+
+@media only screen and (max-width: 320px) {
+  .header-top .top-inner .social-links {
+    justify-content: center;
+    gap: 11px;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .header-top .top-inner .social-links li:nth-last-child(-n+4) {
+    display: none !important;
+  }
+}
+
+
 /** header-lower **/
 
 .main-header .outer-box{
@@ -2364,6 +2437,15 @@ button.ltr {
   padding-right: 100px;
 }
 
+@media only screen and (max-width: 1200px) {
+ .header-style-two .header-top{
+  position: relative;
+  padding-left: 25px;
+  padding-right: 25px;
+}
+  
+}
+
 .header-style-two .header-lower .outer-container{
   position: relative;
   padding-left: 100px;