Header icons color

Hello support team,

1/ In my header, a tab of my menu has a sub-menu, so there is an arrow next to the menu title to open the sub-menu. I would like to remove the arrow, or at least have it in white to hide it. Your team provided the line of code below to remove it but it does not work. Could we try something else please?

.wd-nav[class*=”wd-style-“]>li.menu-item-has-children>a:after {
display: none;
}

2/ We have customized the hovering and active color of the icons in the header with the code below you kindly provided. However now there are two hovering colors:
– there is the yellow color we customized with the code when my mouse in on the icon, which is normal and what it is supposed to be (see screenshot 1)
– there is a grey color when my mouse is not completely on the icon but is still considered hovering, which is not right (see screenshot 2).
– also, when the icon is active, the color turns back to grey instead of staying yellow, both for the search button and for the cart button (see screenshots 3 and 4).

span.wd-tools-icon:hover:before{
color: #E9C346;
}

Could you please help me fix this? You’ll find the admin logins below if helpful.
Thank you

Attachments:

You must be logged in to view attached files.

Hello,

1. Please add this code to the Theme Settings > Custom CSS > Global:

body .wd-nav[class*="wd-style-"]>li.menu-item-has-children>a:after {
    color: white;
}

The icon can have default and hover colors only. Here is the code:

.wd-header-my-account .wd-tools-icon:before {
color:red;
}
.wd-header-search .wd-tools-icon:before {
color:red;
}
.wd-header-search .wd-tools-icon:after {
color:red;
}
.wd-header-wishlist .wd-tools-icon:before {
color:red;
}
.wd-header-cart .wd-tools-icon.wd-icon-alt:before {
color:red;
}

Best Regards

Hello Elise,

1/ Thank you it works well.

2/ The issue is still here, the code you wrote is for having the icons yellow even in normal color, not only upon hover and activation. I made a screen video to show you the 2 hovering colors I mentioned above : the yellow when the mouse is on the icon (which is normal), and the grey when the mouse is not right over the icon but is still considered hovering (which is not normal).
Any input you may have on this please?

Here is the video

Hello,

Please replace “red” with the color #E9C346, so the code would look like:

.wd-header-my-account .wd-tools-icon:before {
color:#E9C346;
}
.wd-header-search .wd-tools-icon:before {
color:#E9C346;
}
.wd-header-search .wd-tools-icon:after {
color:#E9C346;
}
.wd-header-wishlist .wd-tools-icon:before {
color:#E9C346;
}
.wd-header-cart .wd-tools-icon.wd-icon-alt:before {
color:#E9C346;
}

Best Regards

Hello Elise,

Yes this is indeed what I have done, but this code turns the icons in yellow even when not hovered or active. I would like to keep them black, and have them yellow only when hovered or active.
The issue is that, with the previous code, they are grey when active or when hovered from the side of the icon, as per the video I shared above. Would you have something to solve this?

Thank you

Hello,

By default, your icons were yellow on hover. Now your site is not workable: https://gyazo.com/da798717b623674fb4736bffbdf844b4

Please try to remove the code you have recently added to return the site to previous one.

If you have any questions please feel free to contact us.

Best Regards

Hello Elise,

My website was in maintenance mode, that is why you couldn’t see anything without being logged in.
However I still have the same issue: about my menu icons, when inactive they are black and when hovered they are yellow (this is normal). However, there is a grey version when my mouse is hovering the field of the icons but is not directly above them (please see video below).

Can you please help me with this?
Thank you

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.wd-tools-element>a span:hover{
    transition: none;
}

Best Regards

Hello Elise,

Unfortunately this code doesn’t work. I still have the grey color transition between the inactive black and the yellow hover (see screenshot below).
Is there something else we can try please ?

Thank you

Attachments:

You must be logged in to view attached files.

Any idea here?

Hello,

Sorry for the delay.

We need a bit more time to suggest the best solution. We will get back to you asap.

Best Regards

Hello,

Please check now, we have corrected the code in line 6-8.

If you have any questions please feel free to contact us.

Best Regards

Hello Elise,

The lines 6-8 are the same that before and the issue is still here. We might have been implementing changes to custom css at the same time and yours didn’t save.
Could you please make the change again or put the css here?

Thank you

Hello,

The color changes to yellow without grey now. Please check once more: https://gyazo.com/ee60e19a60df6236f2658d7e59df286f

Best Regards

Hello Elise,

Unfortunately on my end it is still the same css and same result than before.
You’ll find a screen video below.

I have cleared all caches (wordpress and browser), looked both from normal and incognito windows and there is still this grey transition. I also went on my website from a computer that never went on it before and the grey transition is there, so it is not a cache problem I guess…

Hello,

Please replace the code with this one:

body .wd-tools-element {
	--wd-header-el-color-hover: #E9C346;
}

Best Regards

Yes it works !!! Finally 😅

Thank you very much for not giving up on this.
Have a good day

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts