Robert Wattner

Hi,

Good job getting everything else working. You almost had the icon too.

I see you added this code

.she-header .elementor-icon {
	color: #9D3737 !important;
}

Change that code to this

.she-header .elementor-icon svg {
	fill: #9D3737 !important;
}

The SVG inside the icon needs to be targeted to change the fill. You were very close.

I would also add a transition on the main element like this

.she-header-yes .elementor-icon svg {
	transition: all 0.4s ease-in-out;
}

.she-header .elementor-icon svg {
	fill: #9D3737 !important;
}

When the plugin is activated, the header gets a class of .she-header-yes, which always stays the same. So you can target things in the header pre-scroll.

Then, as you’ve seen, .she-header is for after scrolled.

That transition is what’s used on the header so I just matched that. You can do the same with anything else that needs a transition.

I noticed that the submenu indicator arrows and the submenu links both stay white. If you want those to be red as well you can use this code for the svg’s and indicators.

.she-header-yes .elementor-icon svg,
 .she-header-yes .elementor-item {
	transition: all 0.4s ease-in-out;
}

.she-header .elementor-icon svg,
.she-header .elementor-item {
	fill: #9D3737 !important;
}

Then change this code

.she-header .elementor-nav-menu a:hover {
	color: #9D3737 !important;
}

To this instead

.she-header .elementor-nav-menu a:not(.elementor-sub-item):hover {
	color: #9D3737 !important;
}

That specifically targets links that aren’t submenu links.

Sorry for all the code blocks. I hope it’s not too confusing. Basically replace the link code above and the first icon code with the combined svg/indicator code.

Let me know if you need any more help. Good luck!

Thank you for the nice review!

I will probably do this today actually.

Hi,

I see this is resolved? Can I disregard? I hope it’s working ok for you.

Hi,

Sorry for the delay. Try this code instead.

.she-header .elementor-nav-menu--main a {
    color: #45694F !important;
}

That should target only the main menu and not the dropdown.

I hope this works for you. Let me know how it goes.

Hi,

Sorry you’re having problems. It looks like something is not allowing the plugin to apply the position css to the header. The plugin doesn’t make the header sticky initially. That is meant to be handled by elementor pro. You can see that on the notice at the top of the settings. https://ps.w.org/sticky-header-effects-for-elementor/assets/screenshot-2.jpg?rev=2709344

That being said, as soon as the scroll distance is met the position should be set to fixed by the plugin. I recommend setting the scroll distance to 1px so it seemlesly becomes fixed when scrolling.

I would start by checking the elementor sticky settings. If you don’t have elementor pro then it’s most likely something with the cache. I’ve seen combining css settings cause issues.

Lastly, if you still can’t find what’s causing it, then this css should force it to work.

.she-header {
    position: fixed !important;
    top: 0 !important;
}

I hope this helps! Let me know.

Hi again,

I had a chance to look at your site some more and it looks like the theme header background color is white. I would try to find that setting and change it to transparent. Otherwise, you can use this CSS

#site-header {

	background-color: transparent !important;
}

That code needs to be on all pages so I suggest putting it in the customizer or elementor site settings.

I hope this helps! Let me know.