Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

MrPink

Member
  • Content Count

    1
  • Joined

  • Last visited

  1. 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!
×
×
  • Create New...