Underline active menu icon

Home › Forums › Gillion Theme › Underline active menu icon

Home › Forums › Gillion Theme › Underline active menu icon

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    RESOLVED Posts

  • js
    Participant

    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?

     

    Shufflehound Support
    Moderator

    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 team

    js
    Participant

    If it’s possible may be it’s also possible to hover the background of the icon instead of the icon.

     

    Best regards,

    Jürgen

    Shufflehound Support
    Moderator

    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;
}

    js
    Participant

    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

    Shufflehound Support
    Moderator

    Not sure what you meant so please describe it a bit more in detail by sharing the screenshot.

    js
    Participant

    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.

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    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;
}

    js
    Participant

    Perfect. Thank you.

    Shufflehound Support
    Moderator

    You are always welcome here 🙂

    js
    Participant

    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

    Attachments:
    You must be logged in to view attached files.

    js
    Participant

    … and it doesn’t work on the menu level of a blog post. See screenshot.

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    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;
}
  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)