Robert Wattner

Hi, I’m happy you like my plugin. I just looked at your site on my phone and your logo is changing for me. This is already a working feature in the pro version that is soon to be released. When writing this code originally, I noticed that there was a bug for firefox that I don’t see in your code.
Here is much more compatible code for what you are doing. It not only works on an image with a class “logo”, like your code, but also works on the elementor site logo widget if you prefer to use it.

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

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

Let me know if this helps you

Hi, sorry for the delay, I’m on vacation out of the country. Do you have the stretch section turned on for your header? That can cause this to happen.

Could you try it without the !important please. If that doesn’t work can you email me so we can get you fixed up

Hi, changing the logo is a feature that’s coming with the new pro version. Unfortunately, it’s not currently supported on the free version. The code isn’t working for you because you aren’t using the elementor menu widget that the code was written for.

For your menu try this CSS

/* MENU ITEM COLOR AFTER SCROLL */
.she-header .pp-advanced-menu--main .pp-menu-item {
    color: #ffffff !important;
}

/* MENU ITEM HOVER COLOR AFTER SCROLL */
.she-header .pp-advanced-menu--main .pp-menu-item:hover {
    color: red !important;
}

Just change the #color to whatever you like.
Let me know if this works for you

The transparent feature is only for the header to be transparent(overlapping) when at the top. The header can start off white, then change to any color with transparency once scrolled.
Have you tried turning off the transparent header and setting the background color to semi-transparent white?
You might have to email me so I can help you further rwattner@gmail.com

I’m sorry, I’m on vacation out of the country and my internet is painfully slow. I’m trying to check different browsers to see what’s going on but it’s taking a while.

Have you tried giving the image a specific width/max-width under the style tab?

Hi, sorry for the delay, I’m on vacation. Does the header start like this or only become this way after scrolling down and back up? Are all of your header section settings(margin, padding, alignment, plugin settings) the same for desktop, tablet, and mobile?
Since the section below your header has a solid white background I would turn the transparent setting off and make sure the header section has no negative margin or negative padding. This should place the header above the page content rather than overlap it. Also, maybe set the background to white to match.

If you are wanting to do a transparent header then more top padding is needed on the section below to offset the overlapping header.

Hi, I see that it looks like you might have the plugging activated on more than one section which is currently not supported. I plan on making this more clear in the documentation.
Also, I see the header is initially position: relative. This means it can scroll off of the page. Try setting the advanced tab > motion effects > Sticky > top. Turning the plugin transparent setting on might help as well.
Let me know how it goes. Great looking site btw