Fade in logo on scroll

[moosebrain]

Hello,
I would like my logo to fade in as the page scrolls up. It is black lettering on white so fading up from white is what I am hoping to get.
Thanks!
Brian

[prakash_s]

Hello Brian,

Thanks for writing to us.

In case you are using the X theme then there is no option to set fade in effect on the logo. In case you are using the Pro theme then I would suggest you please create a custom Header through the Header builder where you would get an option to set the fade-in effect to the Text element through the effect module. In case you have not seen the doc of the Header builder and effect module, please have a look at it to learn more about how to create a custom header and set the fade-in effect on the logo or elements.

Header Builder | Themeco Docs

Effects Module | Themeco Docs

Hope it helps
Thanks

[moosebrain]

Thanks so much!
I got it to work with the SCROLL - TRANSFORM and then used the Entrance and Exit Opacity.

To continue a bit…
I want my logo to fade into full opacity when scrolling down but not show when the page loads.
Is that possible?
Right now it shows for a moment when the page loads, fades out, and then appears. I need it to be totally invisible on page load.
See video.
Thanks!

[tristup]

Hi Brian,

I would suggest you use two different Bar, the sticky bar should be Hidden Initially, in which the image needs to be added. So, when the bar gets stuck, the image will be shown. You can find the structure of the two bars in the following thread.

Making header container (not bar) sticky

Hello, I hope this is a simple question. How do you make the Header container (not bar) sticky? I’ve tried using position: sticky; top:0; on the container CSS but it doesn’t work. I just want the menu to stick at the top… not the Home logo. Many thanks in advance.

Sticky header pops when bar container is above it

I have a header with a top bar and a header below it, and I’d like the bottom bar to be ‘sticky’ and it technically works, but it ‘pops.’ How do I get it to smoothly transition?

How to make Header appear transparent, so that the background of bar 2 is visible

[image] Hello Support, I use 2 bars in the header. How do I make the top bar of the header appear transparent, so that the background of bar 2 can be seen. I wanted the same header effect as https://keewebsites.com.au/ . I am able to make the bar 1 transparent, but is shows the background of Bar1 rather than of bar 2. Help would be appreciated. Thanks.

Hope it helps.
Thanks

[moosebrain]

Thank you very much!

[prakash_s]

You are most welcome, Brian

[moosebrain]

Ok. It’s not making sense to me.
Here’s what I’m trying to follow, but I’m sure I’m missing something because I still get the preload of what I don’t want to see until it sticks but now, twice!

Blockquote
Step 1: Create a copy of the sticky bar .
Step 2: disable Sticky of the first bar
Step 3: Make the second bar Hide initially and enable the Sticky
In that way the Sticky bar will only appear once it is scrolled and sticky, and when you scrolled up, it automatically disapear and the original Bar will be shown.

Here are the steps I took

1. Duplicate Bar
   

   

2. Disable sticky on first bar
   

   

3. Make the second bar sticky
   

   

4. Hide initially
   

   

I’m stuck.
Thanks for the help!
Brian

[tristup]

Hi Brian,

You need to remove the logo from the first bar so the image will not be shown while loading the page. And add the logo to the duplicate bar, which is initially hidden, and will appear when it gets stuck. So the logo will be visible with that too.
If you are not able to follow the steps, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password
– Specific header where you have added this.

To create a secure note, click the key icon underneath any of your posts.

Thanks

[moosebrain]

Thanks for your patience with me.
Secure note sent.

Brian

[tristup]

Hi Brian,

You have done everything correctly except the second bar set to hidden initially. I have set that and now the header is working as expected.

Thanks

[moosebrain]

THANK YOU so much!

[moosebrain]

Just so I totally understand and learn, where are the controls to change to “hidden initially”?

Thanks,
Brian

[moosebrain]

Never mind. I found it!
Thanks again.
Brian

[tristup]

Hi Brian,

Glad that we are able to help you.

Thanks