NiallEwart Posted January 4, 2021 Share Posted January 4, 2021 Site URL: https://niallewart.com Hi, My home page has a dark background, so I've made my logo & mobile logo images white, and this works great. My portfolio pages though have light backgrounds, so I need to invert the color of my logos so that they're black. I can do this with the main logo image easy enough, but nothing I try works for the mobile logo. Currently my audio programming portfolio code injection (the page I'm testing on) has this: Quote <style> @media screen and (min-width:5px) { .header-title-logo img { filter: invert(100%); } } </style> I had originally tried with (max-width:767px) as I saw that posted on forums, but it didn't work. I changed it to min-width just so that it would include on screens of any size, and the above code does change the main logo how I want it to, but still no effect on the mobile logo. And removing the first line works well enough but obviously just for the main logo. Scratching my head at this one, not seeing what exactly I'm doing wrong here. Many thanks for any help. Link to comment
tuanphan Posted January 4, 2021 Share Posted January 4, 2021 Hi. Can you share link to porfolio? We can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
NiallEwart Posted January 4, 2021 Author Share Posted January 4, 2021 1 hour ago, tuanphan said: Hi. Can you share link to porfolio? We can help easier https://chihuahua-bat-5zt5.squarespace.com/config/pages/5f7f8aa5df269c14a342da39 Hopefully that's the right link Link to comment
tuanphan Posted January 7, 2021 Share Posted January 7, 2021 On 1/4/2021 at 10:56 PM, NiallEwart said: https://chihuahua-bat-5zt5.squarespace.com/config/pages/5f7f8aa5df269c14a342da39 Hopefully that's the right link /config is admin url. See how to find page url. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
NiallEwart Posted January 7, 2021 Author Share Posted January 7, 2021 6 hours ago, tuanphan said: /config is admin url. See how to find page url. https://www.niallewart.com/audio-programming password: 123456 Link to comment
tuanphan Posted January 8, 2021 Share Posted January 8, 2021 17 hours ago, NiallEwart said: https://www.niallewart.com/audio-programming password: 123456 Mobile uses this code <style> .header-mobile-logo img { filter: invert(1); -webkit-filter: invert(1); } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
NiallEwart Posted January 8, 2021 Author Share Posted January 8, 2021 6 hours ago, tuanphan said: Mobile uses this code <style> .header-mobile-logo img { filter: invert(1); -webkit-filter: invert(1); } </style> Perfect! Many thanks 😊 Link to comment
minimumsix Posted August 19, 2022 Share Posted August 19, 2022 So this selector no longer works on mobile using SS 7.1 with their new grid system—I've used the old aforementioned one for a while and it suddenly stopped working. Still works for desktop but not mobile for some reason. Haven't found anyone with a solution so I figured it out myself...eventually. For anyone who stumbles upon this thread try putting this in the page's header code injection: <style> /* Invert Mobile Logo */ #header > div.header-announcement-bar-wrapper > div.header-inner.container--fluid.header-mobile-layout-logo-left-nav-right.header-layout-nav-right > div.header-display-mobile > div.header-title-nav-wrapper > div.header-title.header-title--use-mobile-logo.preSlide.slideIn > div.header-mobile-logo > a > picture > img { -webkit-filter: invert(100%); filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); } </style> MeaganH and tuanphan 2 Link to comment
nfnty Posted March 19 Share Posted March 19 (edited) Hi, i have the same issue for mobile on product and blog pages but the code unfortunately doesn't work on these pages. Currently I use this outdated code wich also doesn't work properly on mobile. Has anybody solved the issue? Thanks for your help. <style> .view-item .header-title-logo img { -webkit-filter: invert(100%); filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); } </style> Edited March 19 by nfnty Link to comment
tuanphan Posted March 20 Share Posted March 20 22 hours ago, nfnty said: Hi, i have the same issue for mobile on product and blog pages but the code unfortunately doesn't work on these pages. Currently I use this outdated code wich also doesn't work properly on mobile. Has anybody solved the issue? Thanks for your help. <style> .view-item .header-title-logo img { -webkit-filter: invert(100%); filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); } </style> Can you share link to a product or blog page? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment