Hi there!

Thanks for reaching out.

Please use the following code snippet in your custom CSS:

.sticky-wrapper.is-sticky #sp-header #sp-logo {
    top: 50px;
    overflow: visible !important;
}

Here is all about custom code placement in Helix3 framework: https://www.joomshaper.com/documentation/helix-framework/helix3/custom-css-header-code

Best Regards

If I may.... I would do that in different way to keep whole, but smaller, logo image on white header:

.is-sticky #sp-header .logo img {max-width: 72px;}
.is-sticky #sp-header .logo {height: 75px; top: 0px; left: 0;}

Please add it inside Template Options > Custom CSS area

Hi Rashida and many thanks! Paul, this is exactly what I wanted :) Thank you!

Is there a war to show another (longer) Logo when scrolled down?

I just recognized another creepy behavior. Could you please investigate?

When resize the window the logo is "jumping". The logo should have a fixed point, or?

I saw it. In typical site browse nobody see that. It was designed to be like that "somehow".

That may help a little bit

 @media only screen and (max-width: 1200px) {
  #sp-header .logo img {width: auto;}
}

Hi,

Different logo for sticky header can be achieved with custom CSS. You may check the accepted answer of the similar post: https://www.joomshaper.com/forum/question/4043

In your case the smple code should be:

#sp-header-sticky-wrapper.sticky-wrapper.is-sticky .logo img { opacity: 0; }
#sp-header-sticky-wrapper.sticky-wrapper.is-sticky .logo { background-image: url(fsa.omshots.com/images/2024/03/10/natur.jpg); background-repeat: no-repeat; background-size: contain; }

Please use your desired image link in the above code.

Best Regards

Did that help?

Waiting for your response...

Hi,

Didn't hear anything back from you yet.

Thanks!

I'm sorry that I haven't been in touch for a while. I've had a lot going on with my family. I've been sick a lot and had important things to take care of.

Anyway, thank you very much for following up several times. Unfortunately, it hasn't been resolved yet.

After I uploaded the second version of the logo to the /images directory and edited the code as described, the logo disappeared completely when I scrolled down.

It's also particularly bad in the mobile view.

Would you please investigate again and help?

Thanks in advance!

I hope you are OK, more healthy.

We will check it with access data.

BTW

You had small mess in Custom CSS syntax, yes, so I made vacuuming & cleaning.

Ok, done, fixed.

1. I made small corretion in Layout grid, column width on mobile view
2. I also added new CSS styles, and fixed yours.
3. I used new mobile logo image, just to fit and look better.

Now refresh browser cache and enjoy it.

I know we have winter in Europe, and cold & rainy days..., all get sick from time to time

Oh hi Paul! Good to read from you again. Yes that's true and even more worse when you have children which are hanging around with other children. Illness is going around ^^. You're obviously living in a warmer country. Where you from?

However many thanks for your engagement! Looks good!

Just one thing: The mobile logo is now pixeled - not sharp. How to deal with that? Any suggestion? I made the logo with Illustrator - so it should be sharp.

Yes, with kids - is like lottery, who will be sick next. No, I live next to your border, so we have winter here, brrr.

I think Mobile logo image should be wider, than I used for "testing". Try with image540px of width, then it should have better quality on iPhone Safari.

In case of "too big" after... let me know, I know how to correct that in seconds.