[Resolved] Header transparency

  • Author
    Posts
  • #10695

    Jan
    Participant

    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

    #10696

    Andrew Misplon
    Keymaster

    Hi Jan

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

    #10698

    Jan
    Participant
    This reply has been marked as private.
    #10699

    Andrew Misplon
    Keymaster

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

    #10700

    Jan
    Participant

    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.

    #10701

    Andrew Misplon
    Keymaster

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

    #10702

    Jan
    Participant

    Sure. Done.

    #10703

    Andrew Misplon
    Keymaster

    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.

    #10704

    Andrew Misplon
    Keymaster

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

    #10705

    Jan
    Participant

    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.

    #10706

    Andrew Misplon
    Keymaster

    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?

    #10707

    Jan
    Participant

    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

    #10708

    Andrew Misplon
    Keymaster

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

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

You must be logged in to reply to this topic.

Scroll to top