Header responsive updated

This commit is contained in:
akash 2025-09-20 19:45:15 +05:30
parent 33446ed58c
commit 5852a9f058
3 changed files with 43 additions and 23 deletions

View File

@ -22,7 +22,7 @@ export default function Header2({
<ul className="info-list clearfix"> <ul className="info-list clearfix">
<li> <li>
<img src="/assets/images/icons/call.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> */} <Link href="tel:647-722-3434">647-722-3434</Link>
</li> </li>
<li> <li>
<img src="/assets/images/icons/mail.png" alt="Mail" style={{ marginRight: "8px" }} /> <img src="/assets/images/icons/mail.png" alt="Mail" style={{ marginRight: "8px" }} />

View File

@ -114,7 +114,7 @@
@media only screen and (max-width: 767px){ @media only screen and (max-width: 767px){
.page-title{ .page-title{
padding: 80px 0px; padding: 190px 0px;
} }
.page-title h1{ .page-title h1{

View File

@ -1021,33 +1021,25 @@
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
border: none !important; border: none !important;
position: absolute; /* Keep header floating over content */ position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 999; z-index: 999;
} }
/* Menu, logo, and links visible on hero */
.header-style-two .header-top a, .header-style-two .header-top a,
.header-style-two .header-top .logo { .header-style-two .header-top .logo {
color: #fff !important; color: #bc0000 !important;
} }
/* Padding for alignment without background interference */
.header-style-two .header-top .top-inner { .header-style-two .header-top .top-inner {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding-left: 100px; padding-left: 100px;
padding-right: 100px; padding-right: 100px;
position: relative; /* Needed for flex children alignment */ position: relative;
}
/* Optional: ensure header elements stay visible on scroll */
.header-style-two.fixed-header {
position: fixed;
background: rgba(0, 0, 0, 0.2); /* Slight transparency if needed on scroll */
} }
@ -1058,7 +1050,7 @@
justify-content: space-between; justify-content: space-between;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: 15px; gap: 15px;
overflow-x: auto; /* overflow-x: auto; */
} }
.header-top .top-inner .info-list { .header-top .top-inner .info-list {
@ -1213,7 +1205,7 @@
} }
.header-top .top-inner { .header-top .top-inner {
flex-direction: column; flex-direction: row;
align-items: center; align-items: center;
text-align: center; text-align: center;
gap: 8px; gap: 8px;
@ -1265,7 +1257,14 @@
width: 100%; width: 100%;
} }
.main-header .header-lower .outer-container { /* .main-header .header-lower .outer-container {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
} */
.main-header .header-lower .outer-container {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 0px; top: 0px;
@ -1467,7 +1466,7 @@
font-family: var(--soleil); font-family: var(--soleil);
letter-spacing: 0.8px; letter-spacing: 0.8px;
opacity: 1; opacity: 1;
color: #fff; color: #bc0000;
z-index: 1; z-index: 1;
-webkit-transition: all 500ms ease; -webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease; -moz-transition: all 500ms ease;
@ -1478,7 +1477,7 @@
.new-menu .new-nav>li>a{ .new-menu .new-nav>li>a{
color: #101A30 !important; color: #bc0000 !important;
} }
@ -1495,7 +1494,7 @@
.main-menu .navigation>li.current>a, .main-menu .navigation>li.current>a,
.main-menu .navigation>li:hover>a { .main-menu .navigation>li:hover>a {
color: #fff; color: #bc0000;
} }
.main-menu .navigation>li>a:before { .main-menu .navigation>li>a:before {
@ -1721,7 +1720,7 @@
font-size: 40px; font-size: 40px;
line-height: 50px; line-height: 50px;
cursor: pointer; cursor: pointer;
background: #ffffff; /* background: #ffffff; */
display: none; display: none;
} }
@ -1768,7 +1767,7 @@
.sticky-header .main-menu .navigation>li>a { .sticky-header .main-menu .navigation>li>a {
padding-top: 27px; padding-top: 27px;
padding-bottom: 27px; padding-bottom: 27px;
color: #101A30; color: #bc0000;
} }
.sticky-header .main-menu .navigation>li>a:before { .sticky-header .main-menu .navigation>li>a:before {
@ -2794,8 +2793,8 @@
margin-left: 6px; margin-left: 6px;
width: 6px; width: 6px;
height: 6px; height: 6px;
border-left: 2px solid #fff; border-left: 2px solid #bc0000;
border-bottom: 2px solid #fff; border-bottom: 2px solid #bc0000;
transform: rotate(-45deg); transform: rotate(-45deg);
vertical-align: middle; vertical-align: middle;
} }
@ -3467,12 +3466,33 @@
} }
@media (max-width: 1024px) and (min-width: 769px) { @media (max-width: 1024px) and (min-width: 769px) {
.header-style-two .header-top .top-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 0px !important;
padding-right: 0px !important;
position: relative; /* Needed for flex children alignment */
}
.info-block-one { .info-block-one {
padding: 30px 7px !important; padding: 30px 7px !important;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.header-style-two .header-top .top-inner {
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
padding-left: 100px;
padding-right: 100px;
position: relative; /* Needed for flex children alignment */
}
.blog-details-content .news-block-one .inner-box .lower-content h2 { .blog-details-content .news-block-one .inner-box .lower-content h2 {
font-size: 38px !important; font-size: 38px !important;
line-height: 36px; line-height: 36px;