Hello there! Guys, I use a centered logo with transparent header on my website (no menu). How do I make it behave the same on mobile decives (transparent header and centered logo)? Right now the background becomes solid and logo is pushed to the left.
Hey!
Try adding this code to the Quick CSS:
@media only screen and (max-width: 767px) {
header#header { position: absolute !important; background: transparent !important;}
.responsive #top .logo {left: 50%;-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);transform: translate(-50%, 0);height: 68px;width: auto;position: relative;}
#top .avia-builder-el-0 .slideshow_inner_caption{padding-top: 80px !important;}
.responsive #top .av_header_transparency .logo img.alternate {display: block !important;}
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {opacity: 0;}
}
Cheers!
Josue
This is what I needed as well and the code worked perfectly. Thanks!
Hi,
Great, glad we could help :-)
Regards,
Rikard
Worked for me too. Thanks guys!