![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
October 10, 2018 at 4:56 pm #1020009
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,
YannicOctober 11, 2018 at 10:45 am #1020256Hey 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; }
Best regards,
VinayOctober 11, 2018 at 12:48 pm #1020307Hi 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,
YannicOctober 12, 2018 at 5:25 am #1020582Hey!
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:
Regards,
Vinay-
This reply was modified 5 years, 11 months ago by
Vinay.
-
This reply was modified 5 years, 11 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.