Resolved

Header transparency

Ultra Theme started by Jan Oct 11, 2018 12 replies
Jan Oct 11, 2018 · 3:28 pm #10695

Hi Andrew,
I have a problem with the header settings. I what the header to be transparent when I’m scrolling. I set the opacity to 0.2 but the header stays white.
Also I’d like to use the option to shrink the sticky-header. Right now I can’t do that without cutting off the logo. Probably because I added this custom css:

.site-header .site-branding img {
max-height: 150px;
}
I’m using a svg for the Logo and wanted it to be a bit larger. It would be nice to be able to shrink the header especially for mobile.

Would be great if you had a solution here.
Greetz Jan

Andrew Misplon Puro Oct 11, 2018 · 4:03 pm #10696

Hi Jan

Thanks for reaching out. Please, send a URL and I’ll take a look.

Jan Oct 11, 2018 · 6:14 pm #10698

This reply has been marked as private.

Andrew Misplon Puro Oct 11, 2018 · 6:19 pm #10699

Thanks for the info. Is there any change if you clear Autoptimize and then temporarily deactivate it?

Jan Oct 11, 2018 · 7:44 pm #10700

Hi. That didn’t make a difference. I noticed though that the logo scales down properly on my mobile. But no transperency. I also deaktivated Simple Custom CSS and copied that piece of CSS to the CSS tool in the customizer.

Andrew Misplon Puro Oct 11, 2018 · 7:48 pm #10701

Thanks. Please, can you change my user role to admin so I can take a look at the settings.

Jan Oct 11, 2018 · 7:57 pm #10702

Sure. Done.

Andrew Misplon Puro Oct 11, 2018 · 8:04 pm #10703

Sorry for the hassle. At the moment, I’m unsure why the necessary snippet isn’t outputting for the header opacity. I’ve added this same snippet to Custom CSS. This means that in terms of code output it’s exactly the same, we’ve just done it manually. If this doesn’t bother you too much, you could edit the opacity at Appearance > Custom CSS by changing the 0.2 value.

Andrew Misplon Puro Oct 11, 2018 · 8:10 pm #10704

I forgot to mention, logo scaling seems ok for me now on desktop.

Jan Oct 11, 2018 · 8:56 pm #10705

That looks good! Thanks! The lower part of the logo still gets cut off though. Cleard the browser cache and copied my little snippet back to Simple Custom CSS.

Andrew Misplon Puro Oct 11, 2018 · 9:04 pm #10706

The cut off isn’t happening in MacOS Chrome, Safari or Firefox. Where is the cut off happening, in the initial header or on scroll or both? I’ve added another rule to Custom CSS, has the problem changed at all?

Jan Oct 11, 2018 · 9:17 pm #10707

It works now. I tried it with chrome and firefox on my PC. Didn’t have the problem on the iphone.
Thanks for the great support!

Greetz Jan

Andrew Misplon Puro Oct 11, 2018 · 9:22 pm #10708

Super, glad it’s all ok now. Cheers for now 🙂

13 posts