Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 10, 2018 at 4:56 pm #1020009
    YannicM

    Hi guys,

    I love your theme and started playing around with its latest version. Currently, I am stuck with the last step in finalizing the menu.

    I have default header settings with the standard underline effect (underline appears for active page and on hover). I want to change the color of the underline for menu items that I am just hovering, i.e. different underline color for the active item and the hovered item. I tried different modifications of code I found for changing the underline color in total, but I couldn’t manage to change just the hover color.

    Since I am building locally, I can’t share login credentials. I hope some of you has the code to control the hover underline on top of his mind.

    Any help is highly appreciated!

    Best regards,
    Yannic

    October 11, 2018 at 10:45 am #1020256
    Vinay

    Hey YannicM,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    
/* Active page */

#avia-menu .current_page_item > a > .avia-menu-fx {
    color: red;
}

/* On hover */
#avia-menu .menu-item:hover > a > .avia-menu-fx {
    color: gold;
}

    Menu

    Best regards,
    Vinay

    October 11, 2018 at 12:48 pm #1020307
    YannicM

    Hi Vinay,

    no change so far. I tried both your hover-code and the one from the documentation:

    #top #header_meta li.menu-item:hover a {
    color: gold;
    text-decoration: none;
    }

    Both have not changed that I still have the themes “logo area highlight color” as color for active menu item and hovered item.

    I have no other Custom CSS modifying the menu style. Any idea or any other way to control the hover effect? If not, that is surely not a crucial function, rather a nice gimmick.

    Thank you!

    Best,
    Yannic

    October 12, 2018 at 5:25 am #1020582
    Vinay

    Hey!

    Please replace the old code with this one

    /* Underline color */
#top #avia-menu li.current-menu-item > a > .avia-menu-fx {
    background-color: blue;
    border: none !important;
}

/* On hover */
#top #avia-menu .menu-item:hover > a > .avia-menu-fx {
    background-color: gold;
    border: none !important;
}

    and lastly, clear the cache to view changes when you add new code to the site:

    How to clear the cache

    Regards,
    Vinay

    • This reply was modified 6 years, 1 month ago by Vinay.
  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.