Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1363673

    Hi,
    how and where I can upload another Logo when scrolling down on ONLY the desktop version?
    Thanks!

    #1363675

    Hi,

    Thanks for contacting us!

    You can go to Enfold theme options > Header > Transparency Options to upload a logo to use on transparent header :)

    Regards,
    Yigit

    #1365779

    Hi Yigit,
    thanks a lot.

    But I still can not do what I was looking for.
    Look here, the “Logo1” is shown when I open the site and when I scroll down the “Logo2” appear which I want.

    So here is ok!

    But on this site and other Sites only “Logo2” is shown. I want here also “Logo1” at beginning and then “Logo2” when sroll down.

    All for Desktop Version. Mobile Version is fine now.

    Thanks,
    Ivan

    #1365838

    Hi,

    Thank you for the inquiry.

    The second logo will only display if transparent header is enabled for the page. This is not true in the case of the “leistungen” page above, the breadcrumb is also enabled. You can enable the header transparency by editing the page’s Layout > Header visibility and transparency settings.

    Best regards,
    Ismael

    #1365918

    zunächst würde ich dir dazu raten diese Logos immer auch in den Dimensionen gleich zu halten – auch deckungsgleich innerhalb der Fläche.
    Bei deinem Logo ist zwischen dem Logo mit dem Schattenwurf und dem rein blauen Logo ein Versatz und Größenunterschied.

    Dann ist es wohl auch keine gute Idee ein blaues Logo auf blauem Grund zu zeigen. ;) daher wäre wohl noch ein weißes Logo gut.

    Ich würde wohl versuchen, dem Logo Container einen Pseudo-Container ( :after ) zu geben, und dort ein background-image mit dem weißen Logo zu setzen. bei nicht gescrolltem Header ist das normale Logo zu sehen, bei gescrolltem Header wird dieses auf opacity null gesetzt und der pseudo-container erhält dann die Opacity 1.

    Beispiel code:

    #top #header .logo:after {
      content: "";
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      background-image: url(/wp-content/uploads/logo-IIC_Website_white.png);
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    #top #header .logo:after {
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    #top #header.header-scrolled .logo:after {
      opacity: 1;
      transition: opacity 0.3s ease;
    }
    
    #top #header.header-scrolled .logo a {
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    /************ hier bleibt das Logo bestehen, bei anfänglich gesetzter transparenz ************/
    /************ die transprenten Header haben nämlich alle an html auch eine Klasse ************/
    .html_header_transparency #top #header.header-scrolled .logo a {
      opacity: 1;
      transition: opacity 0.3s ease;
    }
    
    .html_header_transparency #top #header.header-scrolled .logo a img {
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .html_header_transparency #top #header.header-scrolled .logo a .avia-standard-logo-sub img {
      opacity: 1;
      transition: opacity 0.3s ease;
    }

    das unifarben blaue Logo kannst du dann als transparentes Logo setzen.

    schau mal hier:
    https://enfold.webers-webdesign.de/iic/
    https://enfold.webers-webdesign.de/iic2/

    _________________

    First of all, I would advise you to keep these logos always the same in the dimensions – also congruent within the area.
    In your logo there is an offset and size difference between the logo with the shadow cast and the pure blue logo.

    Then it’s probably not a good idea to show a blue logo on a blue background ;) so another white logo would probably be good.

    I would probably try to give the logo container a pseudo-container ( :after ), and put a background-image with the white logo there. when the header is not scrolled the normal logo is visible, when the header is scrolled it is set to opacity zero and the pseudo-container then gets opacity 1.

    the unicolor blue logo you can then set as a transparent logo.

    See example code above. and
    https://enfold.webers-webdesign.de/iic/
    https://enfold.webers-webdesign.de/iic2/

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

You must be logged in to reply to this topic.