-
Posts
-
Sorry if it’s been answered, but I’d like to use Text as my logo. I’ve been using this css:
.logo img { display: none; }
.logo .subtext {
font-size: 24px;
color: #ffffff;
font-weight: 400;
font-family: “Times New Roman”;
}BUT, I want the text color to change when the header shrinks to #000000. Any ideas?
Hi pbspence!
Try to add this code in Quick CSS:
.header-scrolled .logo .subtext { color: #000 !important; }Hope this helps :)
Regards,
NikkoThank you!
Works great until you get to the ipad and iphone. Color not change over when resizing to mobile devices.
Hi,
Please try this as well:
@media only screen and (max-width: 1024px) { .logo .subtext { color: #000 !important; } }Best regards,
RikardYour the best, but now it’s crazy when you resize it to mobile devices or shrink the browser window.
Just saw that Rikards css doesn’t work – I’m trying to get the logo text to change color when it’s scrolled to the sticky header for all screen sizes. For example the ipad now just shows the text black, but it should turn from White in the transparent header to Black in the sticky header. Just like the theme does.
Hi!
We apologize for a bit delayed in responding. Try adding this code in Quick CSS:
@media only screen and (max-width:1024px) { #header .logo .subtext { color: #000 !important; } #header.av_header_transparency .logo .subtext { color: #fff !important; } }Let us know if this works :)
Cheers!
Nikko! – I think I found the issue. Since phones and tablets ignore the shrinking header, the following won’t work on phones or tablets:
.header-scrolled .logo .subtext {
color: #000 !important;
}Is there a solution to this problem? It seems it would be fairly easy to have a text based logo that follows the rest of the themes styles and workings.
Hey!
The last code should work on ipad, on mobile try to add this code:
@media only screen and (max-width:767px) { #header #header_main .logo .subtext { color: #000 !important; } }Best regards,
Nikko
- You must be logged in to reply to this topic.