Robert Wattner

This looks like it’s most likely just a css fix. It’s only 7:40 here and I’m not quite at my computer yet. I’ll be able to look at it in just a little bit

Hi, can you please make sure the header section is NOT set to stretch and add this CSS code

/* MAKE HEADER STICKY BEFORE AND AFTER SCROLL */
.she-header, .she-header-yes {
    position: fixed !important;
}

Let me know if that helps

• This reply was modified 5 years, 2 months ago by Robert Wattner.

At 0px scroll distance that means all of the settings are being applied right away. 1px is recommended to apply settings as soon as scrolling starts while allowing it to reset at the very top pixel

You’re very welcome! Happy to help any time

Alright, I have a whole new strategy that’s working for me on my test site.

Create 2 image widgets for your logo. They can be on top of each other it doesn’t matter as long as they are in the same row. One that will be shown on page load and hidden on scroll, the other will be the opposite it will only show on scroll.

Add class “hide” on the one you want to hide on scroll.
Add class “show” on the one you want to show on scroll.

Make sure they are both sized how you want and have links.

Next, remove the old HEADER LOGO CHANGE and FIREFOX FIX code.

Now add this code

/* HIDE ON SCROLL CLASS AND ID */
.she-header .hide, .she-header #hide {
    display: none !important;
}

/* SHOW ON SCROLL CLASS AND ID */
.she-header-yes:not(.she-header) .show, .she-header-yes:not(.she-header) #show {
    display: none;
}

/* HIDDEN ELEMENT STYLING */
.elementor-editor-active .she-header-yes:not(.she-header) .show .elementor-widget-container, .elementor-editor-active .she-header-yes:not(.she-header) #show .elementor-widget-container {
    display: block !important;
    -webkit-filter: opacity(.4) saturate(0);
    filter: opacity(.4) saturate(0);
    background: -webkit-repeating-linear-gradient(
        325deg
        ,rgba(0,0,0,.08),rgba(0,0,0,.08) 1px,transparent 2px,transparent 9px);
            background-image: -webkit-repeating-linear-gradient(
        325deg
        , rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 1px, transparent 2px, transparent 9px);
            background-image: -moz-repeating-linear-gradient(
        325deg
        , rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 1px, transparent 2px, transparent 9px);
            background-image: -o-repeating-linear-gradient(
        325deg
        , rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 1px, transparent 2px, transparent 9px);
            background-image: repeating-linear-gradient(
        125deg
        , rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 1px, transparent 2px, transparent 9px);
}

.elementor-editor-active .she-header-yes:not(.she-header) .show:not(.elementor-element-overlay), .elementor-editor-active .she-header-yes:not(.she-header) #show:not(.elementor-element-overlay) {
    display: block !important;
    background: -webkit-repeating-linear-gradient(
        325deg
        ,rgba(0,0,0,.08),rgba(0,0,0,.08) 1px,transparent 2px,transparent 9px);
            background-image: -webkit-repeating-linear-gradient(
        325deg
        , rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 1px, transparent 2px, transparent 9px);
            background-image: -moz-repeating-linear-gradient(
        325deg
        , rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 1px, transparent 2px, transparent 9px);
            background-image: -o-repeating-linear-gradient(
        325deg
        , rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 1px, transparent 2px, transparent 9px);
            background-image: repeating-linear-gradient(
        125deg
        , rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08) 1px, transparent 2px, transparent 9px);
}

So now, instead of changing the content, we’re just hiding and showing them when we want.

Let me know if this works. I really hope it does

Looks fine to me. The background image of the div is still overriding the linked image.

Did you remove the

.she-header .logo img {
    visibility: hidden;
}

If not then you can override it with

.she-header .logo img {
    visibility: visible !important;
}

I would put that at the bottom

I found this code twice, which shouldn’t be there

.she-header .logo img {
    visibility: hidden;
}

Also, it looks like the firefox fix code is overwriting the normal code so we need to remove the !important from the end of the content. Leave the !important on the main code. It’s working correctly for me making those changes with the dev tools

/* FIREFOX FIX */
.she-header .elementor-widget-theme-site-logo, .she-header .logo, .she-header #logo {
content:url('https://estebanp33.sg-host.com/wp-content/uploads/2021/03/logo-sin-bajada-color.svg');
width: 70% !important;
height: auto !important;
background-size: contain;
}

Sorry, I don’t know how that !important got in there. Probably messed it up because I replied on my phone with code edits. Woops, I try to answer quickly, this is what happens
The firefox fix doesn’t need an !important because the regular code doesn’t work in firefox …like it’s not even there. However, we need the image content URL to change, not the div with logo class like what’s happening. The image is linked, the div is not. I hope that makes sense

Hi, thanks! Try turning off the transparent option in the plugin and turn on elementor’s sticky option under motion effects. Set sticky to top. If you need a transparent header for specific pages then I suggest making the headers templates and using elementor’s display conditions to choose where to show them.
I hope this helps