Primary logo to change on mobile

[Stephen]

Stephen

February 10, 2021 at 1:54 pm

Hi there. I’m using two logos on my website, a colored version and an all white version. I have the primary set to white and then I’m using CSS to show the colored version on certain pages only. When I switch to a mobile width starting at 1024 it doesn’t read the CSS anymore and displays the all white version. Is there a way I can target those certain pages starting at that width to show a certain logo?

Here’s how I’m changing the logo at fullwidth:

.page-id-363 #logo img {
content: url(/wp-content/uploads/2020/09/CBA-Logo-Colored-1.png);
max-height: 150px;
}

But when I add this it doesn’t work. It still shows the white logo

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

.page-id-363 #logo img {
content: url(/wp-content/uploads/2020/09/CBA-Logo-Colored-1.png);
max-height: 150px;
}
}

*Login to see link

• This topic was modified 5 years, 2 months ago by Stephen.