Change Logo Image When Scrolling
K
Krzysztof Procajło
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!
4 Answers
Order by
Oldest
Ofi Khan
Accepted AnswerHello 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
K
Krzysztof Procajło
Accepted AnswerGreat! 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!
Ofi Khan
Accepted AnswerI have a humble request. It would be very kind of you if you can manage some moment to give us feedback here: