Change logo when scroll down

Viewing 2 replies - 1 through 2 (of 2 total)
  • alichani

    (@alichani)

    8 years, 4 months ago

    Hi @dagnyzhu,
    as far as I know this is not possible with only CSS. Even the original header transition from transparent to white i done through Javascript (2 classes are added).

    Using the CSS below you can change the background of the logo or the size but not the image file used.

    .navbar-not-transparent .title-logo-wrapper img {
	/* width: 10px; */
	/* height: 142px; */
	background-color: #000;
}

    I would suggest posting your question to the Hestia theme support forum, so the theme’s creators and users, who have more intimate knowledge of the code, can better assist you.

    Thread Starter dagnyzhu

    (@dagnyzhu)

    8 years, 4 months ago

    Thanks so much for your quick reply! I actually went to the Hestia forum and found a helpful link https://docs.themeisle.com/article/749-how-to-add-a-second-logo-in-hestia. This code worked perfectly for me:

    .navbar-not-transparent .navbar-brand img {
    content:url(‘http://yoursiteimage.jpg’);
    }

    Instead of using a child theme, I just uploaded my second logo into the media library, inserted the image URL above, and pasted it into additional CSS. Thanks for the referral!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Change logo when scroll down’ is closed to new replies.