Tagged: ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • January 5, 2019 at 2:43 am #1050162
    January 8, 2019 at 12:43 am #1051103
    Basilis

    Hey P3T3R_0ne,

    What is the image u want to use?

    Best regards,
    Basilis

    January 8, 2019 at 1:28 am #1051117
    P3T3R_0ne
    This reply has been marked as private.
    January 8, 2019 at 1:48 am #1051119
    Jordan Shannon

    Hi,

    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(https://sr-sourcing.de/wp-content/uploads/2019/01/favicon.png);
background-size: contain;
background-repeat: no-repeat;
}

    Best regards,
    Jordan Shannon

    January 8, 2019 at 12:02 pm #1051350
    P3T3R_0ne

    Hi,

    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.

    January 8, 2019 at 12:22 pm #1051354
    P3T3R_0ne

    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

    January 8, 2019 at 12:36 pm #1051359
    P3T3R_0ne

    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?

    January 8, 2019 at 1:27 pm #1051378
    P3T3R_0ne

    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.

    January 9, 2019 at 4:03 am #1051564
    Jordan Shannon

    Hi,

    Try adding the following to quick css:

    .header-scrolled .logo{
padding:3px!important;
}

    Best regards,
    Jordan Shannon

    January 9, 2019 at 2:44 pm #1051837
    P3T3R_0ne

    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(https://sr-sourcing.de/wp-content/uploads/2019/01/srs-logo-circle.png) !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?

    January 9, 2019 at 3:00 pm #1051841
    P3T3R_0ne

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

    January 12, 2019 at 2:16 pm #1053073
    Basilis

    Hi,

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

    Best regards,
    Basilis

    January 12, 2019 at 4:03 pm #1053143
    P3T3R_0ne

    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…

    January 17, 2019 at 8:16 am #1054887
    Vinay

    Hi,

    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="https://www.domain.com/logo-3.png"/></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,
    Vinay

    January 17, 2019 at 11:14 am #1054928
    Guenni007

    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. : https://webers-testseite.de/cynthia/
    by the way it is my playground for some header / logo changings

    January 21, 2019 at 6:09 pm #1056837
    P3T3R_0ne

    Hi guys,

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

    January 21, 2019 at 10:18 pm #1056894
    Jordan Shannon

    Hi,

    Please return to let us know if it works out.

    Best regards,
    Jordan Shannon

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