Home › Forums › WoodMart support forum › Header icons color

Header icons color

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • May 29, 2022 at 4:02 pm #379642

    juliette
    Participant

    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.
    May 29, 2022 at 8:22 pm #379684

    Elise Noromit
    Member

    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

    May 29, 2022 at 9:04 pm #379692

    juliette
    Participant

    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?

    May 29, 2022 at 9:08 pm #379694

    juliette
    Participant

    Here is the video

    May 30, 2022 at 3:45 am #379741

    Elise Noromit
    Member

    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

    May 30, 2022 at 11:42 am #379845

    juliette
    Participant

    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

    May 31, 2022 at 2:36 am #380054

    Elise Noromit
    Member

    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

    June 30, 2022 at 11:49 am #387430

    juliette
    Participant

    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.
    July 1, 2022 at 4:00 am #387653

    Elise Noromit
    Member

    Hello,

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

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

    Best Regards

    July 1, 2022 at 11:02 am #387722

    juliette
    Participant

    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.
    July 3, 2022 at 5:28 pm #388219

    juliette
    Participant

    Any idea here?

    July 4, 2022 at 5:01 am #388298

    Elise Noromit
    Member

    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

    July 4, 2022 at 2:00 pm #388424

    Elise Noromit
    Member

    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

    July 4, 2022 at 2:53 pm #388459

    juliette
    Participant

    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

    July 5, 2022 at 1:27 am #388619

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    July 5, 2022 at 11:18 am #388709

    juliette
    Participant

    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…

    July 6, 2022 at 12:58 pm #389078

    Elise Noromit
    Member

    Hello,

    Please replace the code with this one: 

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

    Best Regards

    July 6, 2022 at 4:31 pm #389166

    juliette
    Participant

    Yes it works !!! Finally 😅

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

    July 7, 2022 at 1:01 am #389244

    Elise Noromit
    Member

    You are welcome! We are here to help.

    Wish you a wonderful day!

  • Author
    Posts

Tagged: 

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

The topic ‘Header icons color’ is closed to new replies.