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">
<li>
<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>
<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){
.page-title{
padding: 80px 0px;
padding: 190px 0px;
}
.page-title h1{

View File

@ -1021,33 +1021,25 @@
background: transparent !important;
box-shadow: none !important;
border: none !important;
position: absolute; /* Keep header floating over content */
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
/* Menu, logo, and links visible on hero */
.header-style-two .header-top a,
.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 {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 100px;
padding-right: 100px;
position: relative; /* Needed for flex children alignment */
}
/* 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 */
position: relative;
}
@ -1058,7 +1050,7 @@
justify-content: space-between;
flex-wrap: nowrap;
gap: 15px;
overflow-x: auto;
/* overflow-x: auto; */
}
.header-top .top-inner .info-list {
@ -1213,7 +1205,7 @@
}
.header-top .top-inner {
flex-direction: column;
flex-direction: row;
align-items: center;
text-align: center;
gap: 8px;
@ -1265,7 +1257,14 @@
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;
left: 0px;
top: 0px;
@ -1467,7 +1466,7 @@
font-family: var(--soleil);
letter-spacing: 0.8px;
opacity: 1;
color: #fff;
color: #bc0000;
z-index: 1;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
@ -1478,7 +1477,7 @@
.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:hover>a {
color: #fff;
color: #bc0000;
}
.main-menu .navigation>li>a:before {
@ -1721,7 +1720,7 @@
font-size: 40px;
line-height: 50px;
cursor: pointer;
background: #ffffff;
/* background: #ffffff; */
display: none;
}
@ -1768,7 +1767,7 @@
.sticky-header .main-menu .navigation>li>a {
padding-top: 27px;
padding-bottom: 27px;
color: #101A30;
color: #bc0000;
}
.sticky-header .main-menu .navigation>li>a:before {
@ -2794,8 +2793,8 @@
margin-left: 6px;
width: 6px;
height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
border-left: 2px solid #bc0000;
border-bottom: 2px solid #bc0000;
transform: rotate(-45deg);
vertical-align: middle;
}
@ -3467,12 +3466,33 @@
}
@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 {
padding: 30px 7px !important;
}
}
@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 {
font-size: 38px !important;
line-height: 36px;