Navigation
Archive / Change icon color in nav menu
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • February 15, 2017 at 4:27 pm #1372573
    newskywebsites
    Participant

    Hi there,

    I’m trying to have a Home icon only show up in a site’s top navigation menu. I entered this in the Menu Navigation Label:
    <i class=”x-icon-fa-user” data-x-icon=””></i>

    And it works, but the color is light green instead of white like the other links before hovering. (the hover color is tan like the other links, so that’s good).

    How can I make the icon white in it’s non-hover state?

    site: http://advlawn.temp-website.us/

    Using latest version of WP, X child theme (renew) and Cornerstone.

    Thank you!
    Dawn

    February 16, 2017 at 12:10 am #1373071
    Friech
    Moderator

    Hi Dawn,

    Thanks for writing in! Tan is color of your menu when hovered and active. But if you are on other pages you can see that the home icon is in white just like the other menu items.

    The issue that I am seeing is the home icon has a 50% opacity applied on it, so its kind of darker because it blends on dark green background. To resolve that add this on your custom CSS.

    .x-navbar .desktop .x-nav > li > a > span > i {
	opacity: 1;
}

    Cheers!

    February 16, 2017 at 8:30 am #1373557
    newskywebsites
    Participant

    Perfect! Thank you!

    February 16, 2017 at 9:40 am #1373665
    Rahul
    Moderator

    You’re most welcome! 🙂

    Feel free to ask us again.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1372573 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>