-
Posts
-
Hi, I have my pages set to a glassy transparent header which shows the reversed out logo. The problem is, mobile wants to pull from the normal logo and it doesn’t show up. Two questions:
1) Is there a way to code the reversed out version of the logo you see on desktop to show up on mobile?
2) Can I get rid of the glassy header on the mobile view?Thank you!
Hi,
Thank you for the inquiry.
You can add this css code to hide the default logo and display the alternate one on mobile view:
@media only screen and (max-width: 768px) { /* Add your Mobile Styles here */ .responsive #top .av_header_transparency.av_alternate_logo_active .logo a>img, .responsive #top .av_header_transparency.av_alternate_logo_active .logo a>svg { opacity: 0; display: none; } .responsive #top .av_header_transparency .logo .subtext.avia-svg-logo-sub, .responsive #top .av_header_transparency .logo img.alternate { display: block; } }Result:
Best regards,
IsmaelThis worked great on the logo. The transparent header though is problematic because for some reason the image gets pushed below it. Is there a way to keep it over the top part of the image like the desktop view or remove it altogether for mobile only?
Hi,
Thank you for the update.
Try to include this css code inside the css media query above:
#top .av_header_glassy.av_header_transparency #header_main { background-image: none; background-color: black; }This will disable the gradient background and replace it with a solid black color.
Best regards,
Ismael
- You must be logged in to reply to this topic.