Any way to remove or change the color of this icon in menu?

  • Unknown's avatar
    vtorrie · Member ·

    Hi all, I’d like to remove or change the color of icon that appears on the right of the menu item into black. I’ve successfully turned it into black by using below:

    .main-navigation .dropdown-toggle {

    border: 2px solid #222;
    color: #222;
    }

    however, when I put the mouse on it, it turns back to white again, and i’m having a hard time finding the solution. I’ve also post a link for the screenshot here to better illutrate the problem. Any help would be appreciated. Thank you!

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi there,

    Where did you add that CSS code? I don’t see it in the Additional CSS section in the Customizer.

    If you added it to the style.css file directly, that’s not recommended – any changes you make directly to a theme file will be lost the next time the theme updates. For CSS, it’s best to add it in the Customizer instead.

    But this will prevent the button from being visible on hover and from appearing briefly while clicking a menu item:

    .main-navigation .dropdown-toggle svg, .main-navigation > div ul li:hover > button, .main-navigation > div ul li.focus > button {
	display: none;
}

    You could most likely use display:none in your existing CSS as well, rather than cancelling out the colour like you’re doing at the moment. Setting the colour the same as the background works until you decide to change the background colour. Setting the button to simply not display will keep in hidden no matter how you change the background :)

  • Unknown's avatar
    vtorrie · Member ·

    Your code works perfectly! For CSS, I’ve created a child theme and editted the style there so it should be fine. Thank you for your tips as well!

  • The topic ‘Any way to remove or change the color of this icon in menu?’ is closed to new replies.