Hello,
I would like to achieve the following:
I want different logos to be displayed on different pages, but only mobile
Example:
Mobile page “Home” = Logo A
Mobile page “Contact” = Logo B
Mobile page “Imprint” = Logo C
Mobile page “data protection” = Logo E
or
Example:
Mobile page “Home” = Logo A
Mobile pages “Home” and “Contact” and “Imprint” and “Privacy” = Logo B
Hi Markus,
Please try to use this CSS Code in Quick CSS, located in Enfold > General Styling:
@media only screen and (max-width:767px) {
#header #header_main .logo img {
opacity: 0;
visibility: hidden;
}
/* Homepage */
.home #header #header_main .logo a {
background: url(image_url) center center no-repeat;
}
/* Page */
.page-id-1 #header #header_main .logo a {
background: url(image_url) center center no-repeat;
}
/* Another Page */
.page-id-2 #header #header_main .logo a {
background: url(image_url) center center no-repeat;
}
}
There are 2 things that needs to be changed.
1. image_url needs to be replaced with the correct image url for that page.
2. On the last 2 blocks of code you’ll notice they are almost the same except for the number, that number represents the page ID so you’ll need to modify it since we won’t know the correct page ID on your site.
If you need to use another logo for another page, you can copy the same code (the last block) then replace the page ID number and image url and that should be good.
Hope this helps.
Best regards,
Nikko