Wellness Pro — Are dashicons only black?

[asoon]

Hello,

I’ve modified the Wellness Pro drop-down menu, changing its black boxes to blue. Here’s what I mean, you can see by hovering the mouse over ‘Best Photos’:

http://alvinsoon.com/

However, the dashicon arrow is still black, while the boxes are blue. Is there any way to change the dashicon’s color, or are dashicons always black?

http://alvinsoon.com/

[Victor Font]

You're looking at the wrong element. The dashicons element that you are trying to change is the mobile menu icon. The arrow on the sub-menu is a border element in the sub-menu:before pseudo element. I can't test it on your site because the element won't remain visible after I move my mouse into the code, but it's coming from one of the sub-menu CSS blocks starting around line 1296 in style.css. You're going to have to figure which ones.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[detroitwidget]

Hi Alvin,

Are you using the Autoptimize plugin? If so, you might consider disabling it. That would make things much easier to diagnose. Besides, concatenating and minifying scripts should be a low priority at this point.

That said, I think Victor's correct, your solution lies in here somewhere:

.genesis-nav-menu .sub-menu:after,
.genesis-nav-menu .sub-menu:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    border-bottom-color: #000;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.genesis-nav-menu .sub-menu:after {
    border-width: 10px;
    margin-left: -10px
}

.genesis-nav-menu .sub-menu:before {
    border-width: 11px;
    margin-left: -11px
}

.genesis-nav-menu .sub-menu .sub-menu:after,
.genesis-nav-menu .sub-menu .sub-menu:before {
    display: none
}

I hope this helps.

[asoon]

Thank you so much to you both! I've managed to fix it now.

[Author]

Posts