Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 16, 2014 at 12:15 pm #319725
    hilandi

    Hey, I’m pretty new at this, but I’m loving Enfold so far.

    I’ve managed to change the logo.png completely in the header when it minimizes and turns sticky, but the first logo seems to minimize first before fading over to the second logo. I was wondering if there’s a way to make the logo simply fade over to the second logo as the header minimizes. Quite open to suggestions for alternative ways to fade over between the exchange. Added the url to the webpage in the private content.

    Do ask if I’ve left out any specific details.

    September 16, 2014 at 12:44 pm #319739
    Yigit

    Hi hilandi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .header-scrolled .logo a {
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}

    Cheers!
    Yigit

    September 16, 2014 at 1:11 pm #319773
    hilandi

    Thanks for the answer, but that didn’t seem to do anything. Currently the Quick CSS looks like this:

    .header-scrolled .logo img { opacity: 0; }
.header-scrolled .logo a { insert the logo here); background-repeat: no-repeat; background-size: contain; }

.header-scrolled .logo a {
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
    • This reply was modified 10 years, 9 months ago by hilandi.
    September 19, 2014 at 6:55 am #321680
    Josue

    Hey!

    You need to insert the actual logo there:

    .header-scrolled .logo a {
background: url(_logo_url_here_);
background-repeat: no-repeat; 
background-size: contain;
)

    Cheers!
    Josue

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.