I'm trying to style my navigation so that each nav item has a different hover colour. I have managed to do this but I would like the active setting to be in the chosen colour with coloured underline. A the moment the hovers work but the active elements seem to be conflicting with main css.
Question
MrPink 0
Site URL: https://dolphin-gerbil-zh8s.squarespace.com/
Hi there,
I'm trying to style my navigation so that each nav item has a different hover colour. I have managed to do this but I would like the active setting to be in the chosen colour with coloured underline. A the moment the hovers work but the active elements seem to be conflicting with main css.
The code i'm using is:
/* our services hover */
.header-nav-item a[href="/our-services"]:hover {
color: #59CBE8 !important;
}
/* our services active */
.header-nav-item--active [href="/our-services"] {
color: #59CBE8 !important;
}
/* our services folder hover */
.header-nav-item:hover>a, .header-nav-folder-item:hover a {
color: #59CBE8 !important;
}
/* our services folder active color */
.header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active {
color: #59CBE8 !important;
}
/* our impact hover */
.header-nav-item a[href="/our-impact"]:hover {
color: #F9423A !important;
}
/* our impact active */
.header-nav-item--active [href="/about"] {
color: #F9423A !important;
}
/* our support hover */
.header-nav-item a[href="/our-support"]:hover {
color: #FFD100 !important;
}
/* our support active */
.header-nav-item--active [href="/our-support"] {
color: #FFD100 !important;
}
/* about us hover */
.header-nav-item a[href="/about-us"]:hover {
color: #FF29C7 !important;
}
/* about us active */
.header-nav-item--active [href="/about-us"] {
color: #FF29C7 !important;
}
/* resources hover */
.header-nav-item a[href="/resources"]:hover {
color: #97D700 !important;
}
/* resources active */
.header-nav-item--active [href="/resources"] {
color: #97D700 !important;
}
Any help would be much appreciated!
Link to post
Top Posters For This Question
3
2
Popular Days
Sep 21
2
Sep 16
1
Sep 19
1
Sep 22
1
Top Posters For This Question
MrPink 3 posts
tuanphan 2 posts
Popular Days
Sep 21 2020
2 posts
Sep 16 2020
1 post
Sep 19 2020
1 post
Sep 22 2020
1 post
4 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment