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

MrPink

Member
  • Content Count

    3
  • Joined

  • Last visited

Posts posted by MrPink

  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...