Custom Header Hover Color

Home › Forums › Gillion Theme › Custom Header Hover Color

Home › Forums › Gillion Theme › Custom Header Hover Color

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

  • irfanisrael
    Participant

    Hello,

     

    could you please give a code to individually customize hover color of each header category?

     

    I basically want to have a different hover color for each individual category.

     

    My website is https://lifecobra.com

     

    Thank you

    Shufflehound Support
    Moderator

    Hi @irfanisrael,

     

    Thank you for your question.

     

    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

     

    .sh-nav > li.menu-item:nth-child(1):hover > a {
    color: #d61c1c !important;
}
.sh-nav > li.menu-item:nth-child(1):hover > a {
    color: #d61c1c !important;
}
.sh-nav > li.menu-item:nth-child(1):hover > a {
    color: #d61c1c !important;
}
.sh-nav > li.menu-item:nth-child(1):hover > a {
    color: #d61c1c !important;
}
.sh-nav > li.menu-item:nth-child(1):hover > a {
    color: #d61c1c !important;
}
.sh-nav > li.menu-item:nth-child(1):hover > a {
    color: #d61c1c !important;
}
.sh-nav > li.menu-item:nth-child(1):hover > a {
    color: #d61c1c !important;
}

     

    Please change the hover color in the above shared CSS code for each menu items.

     

    Best regards,
    Shufflehound team

    irfanisrael
    Participant

    Hello,

     

    it works, but pages and posts in the top header and the footer also have this effect, is there a way to only target the header?

     

    Thank you

    Shufflehound Support
    Moderator

    Solution for this topic

    To resolve that please try using below custom CSS code instead of above.

     

    #header-navigation .sh-nav > li.menu-item:nth-child(1):hover > a {
    color: #d61c1c !important;
}
#header-navigation .sh-nav > li.menu-item:nth-child(1):hover > a {
    color: #d61c1c !important;
}
#header-navigation .sh-nav > li.menu-item:nth-child(1):hover > a {
    color: #d61c1c !important;
}
#header-navigation .sh-nav > li.menu-item:nth-child(1):hover > a {
    color: #d61c1c !important;
}
#header-navigation .sh-nav > li.menu-item:nth-child(1):hover > a {
    color: #d61c1c !important;
}
#header-navigation .sh-nav > li.menu-item:nth-child(1):hover > a {
    color: #d61c1c !important;
}
#header-navigation .sh-nav > li.menu-item:nth-child(1):hover > a {
    color: #d61c1c !important;
}

    irfanisrael
    Participant

    Awesome, it works, thank you very much

    Shufflehound Support
    Moderator

    You are most welcome here 🙂

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