Hello,
I have a to different version of logo - bigger (with icon) and smaller (with only text). How i can change it when user scroll site down and sp-header go to sticky/fixed version? I know how i can change it width (through CSS), but dont know change img.
Regards!
Hello Krzysztof Procajło
Please use this CSS to Template Options -> Custom Code -> Custom CSS
#sp-header.header-sticky .logo img {
opacity: 0;
}
#sp-header.header-sticky .logo a {
background-image: url(images/Joomla-flat-logo-en.png); /* use your image link to show when scrolling */
background-repeat: no-repeat;
background-size: contain;
}Best regards
Great! It works fine with slightly changed code at class - #sp-header.menu-fixed:
#sp-header.menu-fixed .logo img {
opacity: 0;
}
#sp-header.menu-fixed .logo a {
background-image: url(images/logo2.png); /* use your image link to show when scrolling */
background-repeat: no-repeat;
background-size: contain;
}Thank You!
You are welcome
I have a humble request. It would be very kind of you if you can manage some moment to give us feedback here: