Another Logo when scrolling down - Support | Kriesi.at

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

Author

Posts
September 2, 2022 at 3:44 pm #1363673

iicinfo
Participant

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

Start

September 2, 2022 at 3:56 pm #1363675

Yigit
Keymaster

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

September 20, 2022 at 11:06 pm #1365779

iicinfo
Participant

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.

Start

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.

Was wir machen

All for Desktop Version. Mobile Version is fine now.

Thanks,
Ivan

September 21, 2022 at 1:29 pm #1365838

Ismael
Moderator

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

September 21, 2022 at 11:22 pm #1365918
Guenni007
Participant
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/
October 2, 2022 at 3:38 pm #1367321

iicinfo
Participant

Hi,
thanks a lot for the answer and sorry for the late respond.
I try the code but it is not working well.

Is there a code that:
– all not transparent Pages should use the Logo 1 (from the Homepage) (example https://www.idea-innovation-consulting.com/leistungen/) and when scroll down Logo 2

Thanks,
Ivan

October 2, 2022 at 5:53 pm #1367342

iicinfo
Participant

@Guenni- thank but the code is not working at my site?

October 3, 2022 at 6:56 am #1367367
Ismael
Moderator
Hi,

Both version of the logo (both blue) are not visible because the background color of header is also blue. Would you like to change the background color of the header on non-transparent pages to white?

Please add this css code.
```
.header_color .header_bg, .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div, .header_color .av-subnav-menu > li ul, .header_color .av-subnav-menu a {
    background-color: #ffffff;
    color: #fff;
}

.header_color .sub_menu>ul>li>a, .header_color .sub_menu>div>ul>li>a, .header_color .main_menu ul:first-child > li > a, #top .header_color .main_menu .menu ul .current_page_item > a, #top .header_color .main_menu .menu ul .current-menu-item > a, #top .header_color .sub_menu li ul a {
    color: #000;
}
```
You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

Best regards,
Ismael
October 7, 2022 at 3:52 pm #1367989

iicinfo
Participant

Hi Ismael,
thanks. But when I use this code, then many of the others colours are not good and I must then change all.
Is it just possible, to make a code:
– Desktop: when a user open a page on a “not transparent” page then it is show “logo 1” and when the user scroll down on the same “not transparent” page, then it is shown “logo 2”?

Thanks,
Ivan

October 7, 2022 at 4:03 pm #1367991

iicinfo
Participant

… now I have only one logo (like earlier), but when a user scroll down it looks not so good an white background on the subpages….

Was wir machen

October 9, 2022 at 1:00 am #1368087
Mike
Moderator
Hi,
As I understand on pages like the one you linked to with no transparency, before scroll you wouls like this logo:

and after scroll you would like this logo:

Then try this css:
```
#top #header.header-scrolled:not(.av_header_transparency) .avia-standard-logo a {
  width: 221px!important;
  height: 100px!important;
  background-image: url(https://enfold.webers-webdesign.de/wp-content/uploads/logo-IIC_Website_03092022-transparent.png)!important;
  background-repeat: no-repeat;
  background-size: cover;
}
#top #header.header-scrolled:not(.av_header_transparency) .avia-standard-logo img {
	visibility: hidden;
}
```
After applying the css, please clear your browser cache and check.
Please note that I didn’t know the link to both of your logo images, so please adjust the urls, but it css will work as is.

Best regards,
Mike
October 9, 2022 at 2:02 pm #1368108

iicinfo
Participant

Hi Mike!
Thanks a lot, this is exayctly that what I was looking for! Now it works :)

Best wishes,
Ivan

October 9, 2022 at 2:04 pm #1368109

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

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

The topic ‘Another Logo when scrolling down’ is closed to new replies.