- This topic has 12 replies, 2 voices, and was last updated 7 years, 7 months ago by
.
Good morning,
I wonder if it’s possible instead of changing color for an active menu icon to underline this menu icon to show it’s active?
Hi @js,
Thank you for your question.
Yes it is possible to achieve this developing custom CSS code.
Could you please share me your site URL where it’s displaying so that i can help you to achieve it?
Best regards,
Shufflehound teamIf it’s possible may be it’s also possible to hover the background of the icon instead of the icon.
Best regards,
Jürgen
Solution for this topic
You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
#page-container .sh-header .sh-nav > .current-menu-item > a { color: inherit !important; text-decoration: underline; }Perfect. Thank yon. As I asked earlier is it possible to hover the background of the menu icon instead changing the color?
Best regards,
Jürgen
Not sure what you meant so please describe it a bit more in detail by sharing the screenshot.
Typically to hover any menu icon you change the color and/or underline. But I want to achieve instead of changing the color of the icon to change the background color of this single icon. Pls see screenshot.
Solution for this topic
You can use below CSS code to achieve this.
#page-container .sh-header .sh-nav > li:hover > a{ background-color: #efefef !important; color: inherit !important; }Perfect. Thank you.
You are always welcome here 🙂
Good morning,
Sorry to open up again this issue. But it just works fine for the main category of the menu bar but it doesn’t for a subcategory. Pls see screenshots. How can I achieve it as well?
Best regards,
Jürgen
… and it doesn’t work on the menu level of a blog post. See screenshot.
To make it work please also use the below custom CSS code.
#page-container .sh-header .sh-nav > .current_page_item > a, #page-container .sh-header .sh-nav > .current-menu-ancestor > a, #page-container .sh-header .sh-nav > .current-post-ancestor > a { color: inherit !important; text-decoration: underline; }
