Header responsive updated
This commit is contained in:
parent
33446ed58c
commit
5852a9f058
@ -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" }} />
|
||||||
|
|||||||
@ -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{
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user