Navigation
Archive / How to Change Color of Text When Hovering (Header)
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • February 21, 2017 at 8:59 am #1379888
    Brock B
    Participant

    On my header, I’d like it so that when a user hovers their mouse over one of the menu items, it changes colors and has a line beneath it. (similar to this website)

    Do you know how to do that?

    bravepandacreative.com

    February 21, 2017 at 9:34 am #1379940
    Rupok
    Member

    Hi there,

    Thanks for writing in! To change the hover color, you can set the color from Customzie > Header > Navbar Links Hover – http://prntscr.com/eblkpc

    And to set the border underneath, You can add this under Custom > CSS in the Customizer.

    .x-navbar .desktop .x-nav > li > a:hover > span {
    box-shadow: 0 2px 0 0 #f54;
}

    Let’s change the color code with your preferred color.

    Cheers!

    February 21, 2017 at 9:49 am #1379964
    Brock B
    Participant

    Perfectttt! You guys are awesome

    February 21, 2017 at 9:50 am #1379976
    Brock B
    Participant

    Only one thing, the line also now shows up when we hover over the button. Anyway to make it so it doesn’t show up when we hover over that button on the top right?

    February 21, 2017 at 10:11 am #1380003
    Thai
    Moderator

    Hi There,

    Please add the following CSS also:

    li#menu-item-167 a span {
    box-shadow: none !important;
}

    Hope it helps :0

    February 21, 2017 at 10:59 am #1380063
    Brock B
    Participant

    My hero! Thanks

    February 21, 2017 at 11:19 am #1380090
    Thai
    Moderator

    You’re most welcome 🙂

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