Change Header Menu Hover Color

Home Forums Legacy Support Support queries Styling issues Change Header Menu Hover Color

Tagged: , , ,

  • This topic has 9 replies, 3 voices, and was last updated 6 years ago by Ava.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #185559
    pablocanedoq
    Participant
    Hi, Could you please pass me a code to change the hover color of the header menu and the top header menu? If possible, you can change both independently. NOTE 1: That the code does not affect the sub navigations hover color. And that if it affects, that you can change the color independently. NOTE 2: That the code does not affect any other link in the whole site. By the way, looking in the forum I have found that you have given a code to solve this, but it has not worked for me. This is the code that I used:   ul # menu-main-menu li to: hover {color: # ff0000! important;}   Using this code, when I put the cursor over the header menu text, the code works fine, like in this image: https://prnt.sc/llro7o But when I move the cursor to the area of the sub menu, the code no longer works well, as in this image: https://prnt.sc/llrpc5 I await your comments and help. Thanks in advance.
    #185586
    Ava
    Member
    Hi pablocanedoq Please add the below custom Css code to WP Admin – Appearance – customize - custom css - publish   #global ul#menu-main-menu .menu-item-has-children a:hover{ color: #637a8c !important; } #global ul#menu-main-menu .menu-item-has-children .sub-menu li a:hover{ color: #31c6ae !important; } #global nav li:hover .sub-menu>li>a{ color: white !important; } #menu-main-menu>li:hover a{ color:#637a8c !important; } #menu-main-menu .menu-item-has-children:hover a{ color:#637a8c !important; } #global ul#menu-main-menu .hasmegamenu .sub-menu a{ color: white !important; } #menu-main-menu .menu-item-has-children:hover a{ color:#637a8c !important; }  
    #185695
    pablocanedoq
    Participant
    Hi, There is one thing that has not worked. When I'm in Home, everything works fine: https://prnt.sc/lm2be8 But, when I click on a particular page, it disappears from the menu. See the image: https://prnt.sc/lm2hbu Could you check it please? Thank you.
    #185860
    logan
    Member
    Dear Pablo, it was happening only on courses pages. paste these codes in your custom css. nav.menu-main-menu-container ul#menu-main-menu li:nth-child(1)>a>strong {color: #ffffff !important;} nav.menu-main-menu-container ul#menu-main-menu li:nth-child(1)>a>strong:hover {color: #637a8c !important;} it will resolve the issue. Refer: http://prntscr.com/lmzl8a If I can be of assistance, please do not hesitate to contact me again.  
    #185950
    pablocanedoq
    Participant
    Thank you @logan It is solved in part. Now those elements that disappeared, now they don't. That is done. However, when you enter in a page, for example "All Courses", the name of this page should change color in the menu. But that does not happen, the letters remain on white: https://prnt.sc/ln50mf It should change its color, like here: https://prnt.sc/ln4wr5 Could this be fixed? Thank you
    #186035
    Ava
    Member
    Hi pablocanedoq Please add the below custom Css code to WP Admin – Appearance – customize - custom css - publish   .minimal nav li a:hover, .minimal nav li:hover>a, .minimal nav li.current_menu_item>a, .minimal nav li.current_page_item>a, .minimal.woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .minimal.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a, .elegant #buddypress .item-list-tabs#subnav ul li.current a, .elegant.single-course #item-nav div.item-list-tabs#object-nav li.current a, .elegant.directory.d3 #buddypress .item-list-tabs li.selected a, .elegant.directory.d4 #buddypress .item-list-tabs li.selected a, .elegant.bp-user.p4 #buddypress .item-list-tabs#subnav li.selected.current a, .elegant.single-item.groups.g4 #buddypress .item-list-tabs#subnav li.selected.current a { color: #637a8c !important; }   .course nav.menu-main-menu-container ul#menu-main-menu li:nth-child(1)>a>strong { color: #637a8c !important; }  
    #186100
    pablocanedoq
    Participant
    <span id="result_box" class="" lang="en">Thank you! It works perfectly. <span class="">Should I delete the previous code?</span></span>
    #186212
    Ava
    Member
    Yes, you can delete the previous code if everything working good after deleting that code. Please confirm if this resolve. Thank You      
    #186288
    pablocanedoq
    Participant
    It works perfectly. Thank you! You may close this topic.
    #186291
    Ava
    Member
    Thanks for Confirming. I am closing this topic.
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Change Header Menu Hover Color’ is closed to new replies.