header correction updated

This commit is contained in:
Selvi 2025-08-19 19:20:43 +05:30
parent 884e9cac3f
commit 064c8f79a2
4 changed files with 187 additions and 121 deletions

View File

@ -92,14 +92,17 @@ const ServiceSectionS2 = () => {
href={`/services/[slug]`}
as={`/services/${service.slug}`} // Dynamic slug
>
{service.sTitle} {/* Service Title */}
{service.sTitle.length > 30
? service.sTitle.substring(0, 30) + "..."
: service.sTitle
}
</Link>
</h2>
<p
dangerouslySetInnerHTML={{
__html:
service.description.length > 100
? service.description.substring(0, 100) + "..."
service.description.length > 80
? service.description.substring(0, 80) + "..."
: service.description,
}}
></p>

View File

@ -423,7 +423,7 @@
float: none;
position: relative;
z-index: 99;
text-align: center;
// text-align: center;
}
.wpo-site-header .navbar-right {
@ -1328,6 +1328,13 @@
}
}
@media (max-width: 768px) {
.navbar-header .navbar-brand img {
max-width: 220px;
width: auto;
height: auto;
}
}
/*navbar collaps less then 992px*/
@include media-query (991px) {
@ -1821,29 +1828,35 @@
overflow-x: auto;
overflow-y: scroll;
}
.responsivemenu .card-body{
.responsivemenu .card-body {
background: linear-gradient(286.02deg, #080A14 38.02%, #10121E 61.92%, #282A34 74.32%, #404354 90.71%, #343643 99.65%);
}
.mobileMenu h2{
.mobileMenu h2 {
padding-left: 20px;
}
.mobileMenu.show{
.mobileMenu.show {
left: 0;
}
.showmenu {
position: relative;
top: 0;
z-index: 999;
cursor: pointer;
}
.responsivemenu {
list-style: none;
padding-left: 0;
padding-top: 10px;
}
.responsivemenu li a,
.responsivemenu li p,
.responsivemenu ul{
.responsivemenu ul {
display: block;
padding: 13px 35px;
font-size: 16px;
@ -1853,64 +1866,74 @@
color: #fff;
cursor: pointer;
}
.responsivemenu li p{
.responsivemenu li p {
position: relative;
margin-bottom: 0;
}
.responsivemenu ul.subMenu{
.responsivemenu ul.subMenu {
padding-top: 0;
padding-left: 15px;
padding-right: 0;
}
.responsivemenu ul.subMenu ul{
.responsivemenu ul.subMenu ul {
position: relative;
margin-bottom: 0;
padding-left: 0;
}
.responsivemenu ul{
.responsivemenu ul {
list-style: none;
}
.responsivemenu ul p,
.responsivemenu ul a{
.responsivemenu ul a {
color: #fff;
position: relative;
font-size: 16px;
}
.responsivemenu ul p i{
.responsivemenu ul p i {
position: absolute;
right: 0;
top: 5px;
}
.responsivemenu .card{
border:none
.responsivemenu .card {
border: none
}
.responsivemenu .card-body{
.responsivemenu .card-body {
padding-top: 0;
}
.responsivemenu li a{
.responsivemenu li a {
position: relative;
}
.responsivemenu li i{
.responsivemenu li i {
position: absolute;
right: 20px;
top: 17px;
}
.showmenu i {
font-size: 30px;
color: #fff;
}
.mobileMenu{
.mobileMenu {
display: none;
}
.showmenu{
.showmenu {
display: none;
}
@media (max-width:992px){
@media (max-width:992px) {
.showmenu {
display: block;
width: 40px;
@ -1920,11 +1943,12 @@
border-radius: 5px;
}
.showmenu button:focus{
.showmenu button:focus {
outline: none;
box-shadow: none;
}
.showmenu button span{
.showmenu button span {
background-color: #fff;
width: 20px;
display: block;
@ -1932,31 +1956,65 @@
margin: 0 auto;
margin-bottom: 5px;
}
.mobileMenu{
.mobileMenu {
display: block;
}
}
@media (max-width: 768px) {
.header-container {
position: relative;
display: flex;
align-items: center;
padding: 0 15px;
}
.showmenu {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: block;
width: 40px;
height: 36px;
margin-right: 30px;
text-align: center;
line-height: 40px;
border-radius: 5px;
}
.showmenu button span {
width: 20px;
height: 2px;
margin: 0 auto 5px auto;
background-color: #fff;
display: block;
}
}
.middle-header-3 .showmenu {
top: 36px;
}
.middle-header2 .showmenu {
top: 26px;
}
.middle-header-3 .showmenu i{
.middle-header-3 .showmenu i {
color: #fff;
}
@media(max-width:450px){
@media(max-width:450px) {
.mobileMenu {
left: -260px;
width: 260px;
}
.responsivemenu li a, .responsivemenu li p {
.responsivemenu li a,
.responsivemenu li p {
font-size: 14px;
padding: 13px 25px;
}
@ -1964,6 +2022,6 @@
.responsivemenu a:not([href]):not([class]),
.responsivemenu a:not([href]):not([class]):hover{
.responsivemenu a:not([href]):not([class]):hover {
color: #ddd;
}

View File

@ -1082,6 +1082,7 @@
}
.wpo-campaign-text-top {
min-height: 215px;
padding: 15px;
padding-top: 22px;

View File

@ -81,12 +81,16 @@
margin: -1px;
cursor: pointer;
@media(max-width:1199px){
padding: 12px;
@media(max-width:1024px){
padding: 10px 21px;
font-size: 18px;
}
@media(max-width:767px){
padding: 10px;
@media(max-width:768px){
padding: 5px 13px;
font-size: 14px;
}
@media(max-width:500px){
padding: 5px 2px;
font-size: 14px;
}