Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
  • #1050162

    Hey P3T3R_0ne,

    What is the image u want to use?

    Best regards,

    This reply has been marked as private.


    I test this in the browser and it should work. Please add the following to quick css:

    .header-scrolled .logo img { opacity: 0; }
    .header-scrolled .logo a {
    background-image: url(;
    background-size: contain;
    background-repeat: no-repeat;

    Best regards,
    Jordan Shannon



    I have placed the css in quick css but it has no effect.
    Logo on sticky header is still the the same as on normal header.


    Well, I have just realized that it´s working on the english website but not on the German…
    I made the site multilingual with wpml


    Ok, I just found out that the quick css for language 1 is not the same as for language 2.
    When I do some css changes or add new code then I have to do it for all languages separately?


    The result is almost satisfactory. But one more thing.

    How can I apply a padding to the sticky header logo as well? I have tried it with various css but could not get it to work.

    The normal logo has a padding: 3px; in order to have a little bit of space between logo and top/bottom border of header.
    To make a smooth transition to the sticky header logo I need to apply a padding: 3px; to that logo as well.



    Try adding the following to quick css:

    .header-scrolled .logo{

    Best regards,
    Jordan Shannon


    Hi Jordan,

    I have tried that, but the result is not satisfactory. The images are not exactly overlapping, which is important though. Otherwise, the transition is not smooth.
    I guess the images are not exactly overlapping because for the normal header it is a a normal img and for the scrolled header it is a background-image.
    I have changed the css to the following:

    .header-scrolled .logo a{
    content: url( !important;

    This makes the logo exactly overlapping.
    However, now the smooth transition is gone. Before, the text in the logo was fading away. This effect is now gone.
    I have tried some css animation for the scrolled logo, but it wasn´t satisfactory.

    Do you have a solution for that?


    You can compare the results by switching between English and German language.
    English language has content:url(….)
    German language has background-image:url(…)



    That is really strange, language switchers shoul;dnt be interrupting at all, with the CSS functionality.

    Best regards,


    Well, I think the language switcher is not interrupting with the css functionality. This is what happens:

    The Endold Child options panel is devided by language after installing WPML. Now there is Enfold Child (DE) and Enfold Child (EN). I can apply different settings for each of these. That is also why the css customization can vary for each language because for now I placed the CSS code in Enfold Child>Quick css. The quick CSS in Enfold Child (DE) is different to the quick CSS in Enfold Child (EN).

    I am still hoping to find a good solution for what I want to achieve, which is: a smooth logo transition to a different logo when the header shrinks. I am looking to have a similar result to the header of this support forum.

    I might have another approach to achieve this in the case of my website.
    Can you put two logos on top of each other? In my case that would be the normal logo with the text and above the logo without text in exactly the same dimensions so they are perfectly overlapping (the second logo on top has a transparent background).
    Then when you shrink the header you make a css transition effect with opacity going to 0 applied only to the first logo with text, leaving just the second logo visible in the shrinked header.

    You could probably pile two logo images on top of each other with a short php function, right? Can you help with this, because I am not yet able to write php code myself.

    I am looking forward to your reply. Thanks…



    Thank you for writing to us.

    We already have an article which will help you add multiple logos please check this link

    Just remove the logo 3 or the below line in the code and use the rest.

    $logo .= '<a class="third-logo" href="/"><img src=""/></a>';

    Feel free to play around with the transition value in the CSS code to overlap the logos.

    If the shrinking header is active you can make use of a special class in the header called “.header-scrolled” to reveal the second logo and “.header-scrolled:not” to hide the second logo :)

    Best regards,


    With your given png it will be that solution you have. – but with a svg it is mucht easyer because you can have css rules for singel path if you want.
    You can see here a demo – the text “Bonn” vanishes on scrolled case – and if you hover the logo the path “Bonn” gets red etc. pp.
    nice to have svg for web. :
    by the way it is my playground for some header / logo changings


    Hi guys,

    thank you very much for the replies. I will soon work on this again. The svg solution sounds pretty optimal.



    Please return to let us know if it works out.

    Best regards,
    Jordan Shannon

Viewing 17 posts - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.