Web Hosting Theme Header adjustment

[cholkutdioor2012]

Hi Dave,
the logo header does not appear on Mobile devices.
hope you will send a solution soon

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Customize>>Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:767px) {
.logo { margin-top:0 !important;}
body .header_wrap .header, body.home.has_trans_header .header { position: relative !important;}
}

Regards,
Dave

[cholkutdioor2012]

Thank Dave,
It has worked, but I need it to be position like this https://imgur.com/a/sfOJN

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Customize>>Basic >> Scroll down to find Custom CSS and paste there:

Remove this code

@media screen and (max-width:767px) {
.logo { margin-top:0 !important;}
body .header_wrap .header, body.home.has_trans_header .header { position: relative !important;}
}

And add this new code there

@media screen and (max-width:767px) {
.logo { position:absolute; margin-top:-95px !important; width:50%;}
.head-info-area .right { margin-top:10px !important; float:right !important;}
body .header_wrap .header, body.home.has_trans_header .header { position: relative !important;}
}

Regards,
Dave

[cholkutdioor2012]

Thank Dave,
It has worked well for mobile, but for a tablet, it looks like this https://imgur.com/a/iKVMR.
I want it to look like this image of mobile https://imgur.com/a/WQgmQ

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Customize>>Basic >> Scroll down to find Custom CSS and paste there:

Remove last css code:

@media screen and (max-width:767px) {
.logo { position:absolute; margin-top:-95px !important; width:50%;}
.head-info-area .right { margin-top:10px !important; float:right !important;}
body .header_wrap .header, body.home.has_trans_header .header { position: relative !important;}
}

And add this one:

@media screen and (max-width:479px) {
.logo { position:absolute; margin-top:-95px !important; width:50%;}
.head-info-area .right { margin-top:10px !important; float:right !important;}
body .header_wrap .header, body.home.has_trans_header .header { position: relative !important;}
}

@media screen and (min-width:480px) and (max-width:767px) {
.logo { position:absolute; margin-top:-115px !important; width:50%;}
.head-info-area .right { margin-top:10px !important; float:right !important;}
body .header_wrap .header, body.home.has_trans_header .header { position: relative !important;}

}

@media screen and (min-width:768px) and (max-width:1024px) {
.logo { position:absolute; margin-top:-95px !important; width:50%;}
}

Regards,
Dave

[cholkutdioor2012]

Perfect, thank you Dave,
Gai Chol

[Sonl Sinha]

Hi Gai Chol,

If you found our service good kindly review us here: https://www.sktthemes.org/forums/topic/reviews-and-testimonials/page/13/

Regards,
Dave

[Author]

Posts