"css" (#2769515) / ThemeNectar

1

fiscalnote started the conversation

May 6, 2021 at 12:10am

How can i make each hover in the menu a different color. So when I hover over a nav item each is a different color.

8,877

Tahir replied

May 6, 2021 at 11:59am

Hey Again,

Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

#header-outer #top nav > ul > li:nth-of-type(1) > a {
    color: #c83eab147 !important;
}
#header-outer #top nav > ul > li:nth-of-type(2) > a {
    color: #f52147 !important;
}
#header-outer #top nav > ul > li:nth-of-type(3) > a {
    color: #212df5 !important;
}
#header-outer #top nav > ul > li:nth-of-type(4) > a {
    color: #32d6ff !important;
}
#header-outer #top nav > ul > li:nth-of-type(5) > a {
    color: #008585 !important;
}

Thanks

ThemeNectar Support Team

1

fiscalnote replied

May 6, 2021 at 4:55pm

this changes the nav original state but not the hovers, I only want the hovers to change.

8,877

Tahir replied

May 6, 2021 at 10:10pm

Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

body #header-outer[data-lhe="default"] #top nav > ul > li:nth-of-type(1) > a:hover {
    color: #c83eab147 !important;
}
body #header-outer[data-lhe="default"] #top nav > ul > li:nth-of-type(2) > a:hover {
    color: #f52147 !important;
}
body #header-outer[data-lhe="default"] #top nav > ul > li:nth-of-type(3) > a:hover {
    color: #212df5 !important;
}
body #header-outer[data-lhe="default"] #top nav > ul > li:nth-of-type(4) > a:hover {
    color: #32d6ff !important;
}
body #header-outer[data-lhe="default"] #top nav > ul > li:nth-of-type(5) > a:hover {
    color: #008585 !important;
}

Thanks

ThemeNectar Support Team

Comments