From 26c7edaf79fe219ecf6b4412b52bf3ae2f8001df Mon Sep 17 00:00:00 2001 From: selvi Date: Fri, 29 Aug 2025 17:02:31 +0530 Subject: [PATCH] header responsive updated --- components/layout/Menu.js | 2 +- components/layout/header/Header2.js | 10 +- public/assets/css/style.css | 188 +++++++++++++++++------- public/assets/images/icons/call.png | Bin 0 -> 337 bytes public/assets/images/icons/location.png | Bin 0 -> 318 bytes public/assets/images/icons/mail.png | Bin 0 -> 276 bytes 6 files changed, 141 insertions(+), 59 deletions(-) create mode 100644 public/assets/images/icons/call.png create mode 100644 public/assets/images/icons/location.png create mode 100644 public/assets/images/icons/mail.png diff --git a/components/layout/Menu.js b/components/layout/Menu.js index e715840..5a858ef 100644 --- a/components/layout/Menu.js +++ b/components/layout/Menu.js @@ -28,7 +28,7 @@ export default function Menu() {
  • Our Team
  • Our Approach
  • Gallery
    • - {/*
  • Neurosurgery
    • */} +
  • Covid-19-Updates
  • Services diff --git a/components/layout/header/Header2.js b/components/layout/header/Header2.js index ad627c9..e5aad65 100644 --- a/components/layout/header/Header2.js +++ b/components/layout/header/Header2.js @@ -14,14 +14,17 @@ export default function Header2({ scroll, isMobileMenu, handleMobileMenu, isSide
    • - Phone + Phone 647-722-3434
    • - Mail + Mail info@rapharehab.ca
      • +
    + +
    • Why Us
      • @@ -34,9 +37,6 @@ export default function Header2({ scroll, isMobileMenu, handleMobileMenu, isSide
    • Payment And Insurance
      • -
    - -
      • diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 3a9d140..2cf0278 100644 --- a/public/assets/css/style.css +++ b/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; diff --git a/public/assets/images/icons/call.png b/public/assets/images/icons/call.png new file mode 100644 index 0000000000000000000000000000000000000000..7e8a97b1f811f4be07e6c43c41d902cee995778e GIT binary patch literal 337 zcmV-X0j~auP)LlfjL`Fc3u_6tGJPIqh*5Q2`~;0V#nJR@w$A!Bnyh zaPXBIC4>q-hd9IxwiAmlS(ax;&&mApLJ|qNu(zpXQIhO(8s!rC;M^IOqC*DSn7X5>agv@)iRFO3iQPiH z1J=MNumL`znp3GaPSbjMrc;w|e`^Zr<~*mJdbdmZ50@uRNv%ft7If;T0~Jiksi7bC jZ8%?n->?Hz11EI{Heg4vqA~em00000NkvXXu0mjfJUN5R literal 0 HcmV?d00001 diff --git a/public/assets/images/icons/location.png b/public/assets/images/icons/location.png new file mode 100644 index 0000000000000000000000000000000000000000..39053f1b7307c185005e0f52173c0e450e83e62f GIT binary patch literal 318 zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE-VXMsm#F#`j)5C}6~x?A@LDEPtC z#WBR9cWH>DV6%ZhOx6Mq2Pf4BK$1(yfr)Pgvx)*EXUM^Cjz+?V;yiB8J?ZeS=ycJ| zolPo2D;P`|ytdzG@L>qs+_WT0_2fLWs`6(c*@EXdjruL8Z#b>+`NgAOP0!`>7~TcG zc{=aB#y`Ga+SL)s8|}b%3Je`7Q3Ll zPpLT9Uj6M3H{FtRo@%gsbG*p@``%HX6`8_|kJv43tgZU*`$N?3nSAiI#f#>j0{Wf7 M)78&qol`;+0NBNQ#sB~S literal 0 HcmV?d00001 diff --git a/public/assets/images/icons/mail.png b/public/assets/images/icons/mail.png new file mode 100644 index 0000000000000000000000000000000000000000..2b98ebed6f7b77daa0b089043c702b1f2cd15b7d GIT binary patch literal 276 zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE-VXMsm#F#`j)5C}6~x?A@LD0s}% z#WBR9_w1B|yiEoYZt};h`wnpQU104A7ruKiw1k1F_#~jAbjq8Ljh`o~GaA3{ZKjm#B+ls*E@T}6MX3s7ku`GSl z9ATSV!o86uka`LgFBn|6t4*_%=sDcR>kL~_wDIgPcgTe~DWM4fv_Nx? literal 0 HcmV?d00001