Jump to content

MrPink

Member
  • Posts

    10
  • Joined

  • Last visited

Everything posted by MrPink

  1. Thanks for the code Tuanphan. The 'Our Services' title is still highlighting pink when you hover over the folder items. The entire code is below - can you tell me where i'm going wrong? Thanks, Spencer .header-actions-action .btn {color: #003349 !important; background-color: #97d700 !important; } /* SS 7.1 - Remove nav underline */ header#header a:not(.btn) { background-image: none !important; } .sqs-block-html a {background-image:none!important} /* our services hover */ .header-nav-item a[href="/our-services"]:hover { color: #59CBE8 !important; } /* our services active */ .header-nav-folder-item.header-nav-folder-item--active a { 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="/our-impact"] { 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 hover */ .header-nav-item a[href="/about"]:hover { color: #FF29C7 !important; } /* about active */ .header-nav-item--active [href="/about"] { color: #FF29C7 !important; } /* about folder hover */ .header-nav-item:hover>a, .header-nav-folder-item:hover a { color: #FF29C7 !important; } /* about 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: #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; } /* news hover */ .header-nav-item a[href="/news"]:hover { color: #59CBE8 !important; } /* news active */ .header-nav-item--active [href="/news"] { color: #59CBE8 !important; } /* Our services dropdown blue on hvoer */ a.header-nav-folder-title[href="/our-services"] + div a:hover { color: #59cbe8 !important; }
  2. Hi Tuanphan, thanks for the css. It's solved the hover states but the active color for Our Services is still pink when it needs to be blue. Below is the full css I have. What else can I change to solve this? Thank you https://www.pbsconsultancy.net/ .header-actions-action .btn {color: #003349 !important; background-color: #97d700 !important; } /* SS 7.1 - Remove nav underline */ header#header a:not(.btn) { background-image: none !important; } .sqs-block-html a {background-image:none!important} /* Our services dropdown blue on hvoer */ a.header-nav-folder-title[href="/our-services"] + div a:hover { color: #59cbe8 !important; } /* 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="/our-impact"] { 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 hover */ .header-nav-item a[href="/about"]:hover { color: #FF29C7 !important; } /* about active */ .header-nav-item--active [href="/about"] { color: #FF29C7 !important; } /* about folder hover */ .header-nav-item:hover>a, .header-nav-folder-item:hover a { color: #FF29C7 !important; } /* about 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: #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; } /* news hover */ .header-nav-item a[href="/news"]:hover { color: #59CBE8 !important; } /* news active */ .header-nav-item--active [href="/news"] { color: #59CBE8 !important; }
  3. Yes that's right: Our Services should be blue on hover
  4. Ok I was missing the code for the news section, so that has been corrected, but I'm still having the issue where 'Our Services' is still appearing with Pink hover states instead of blue. It's as though the 'About' code is overriding this
  5. Thanks so much for replying with the video. My issue is the 'Our Services' menu needs to be blue in every state (active, hover and submenus) and it's currently pink. Also the 'News' needs to highlight in blue in every state. It would be great if you had an idea where I'm going wrong Thank you!
  6. Site URL: https://www.pbsconsultancy.net/ Hello, I'm having an issue with my navigation css and wondered if anyone could tell me where I'm going wrong. Firstly the 'Our impact' menu item needs to stay red when active and secondly the 'About' nav needs to be pink #FF29C7 on hover, active and sub menu hover. The code I have is: .header-actions-action .btn {color: #003349 !important; background-color: #97d700 !important; } /* SS 7.1 - Remove nav underline */ header#header a:not(.btn) { background-image: none !important; } .sqs-block-html a {background-image:none!important} /* 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 hover */ .header-nav-item e[href="/about"]:hover { color: #FF29C7 !important; } /* about active */ .header-nav-item--active [href="/about"] { /* about folder hover */ .header-nav-item:hover>a, .header-nav-folder-item:hover a { color: #FF29C7 !important; } /* about 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: #FF29C7 !important; } 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 as I dont know what i'm doing wrong! Thanks
  7. Site URL: https://www.pbsconsultancy.net/ Hi, I'm having trouble with my navigation colours. Each menu item has a designated colour (including its dropdown) but it keeps breaking after I've recently added a new page. The colours should be: Our services (inc drop downs) - blue #59CBE8 Our impact - red #F9423A Our support - yellow #FFD100 About (inc drop downs) - Pink #FF29C7 Resources - Green #97D700 News- blue #59CBE8 Currently 'Our services' and 'Our support' are not appearing correctly This is the current css: .header-actions-action .btn {color: #003349 !important; background-color: #97d700 !important; } /* SS 7.1 - Remove nav underline */ header#header a:not(.btn) { background-image: none !important; } .sqs-block-html a {background-image:none!important} /* 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="/our-impact"] { color: #F9423A !important; } /* our support hover */ .header-nav-item a[href="/why-our-support-is-so-special"]:hover { color: #FFD100 !important; } /* our support active */ .header-nav-item--active [href="/why-our-support-is-so-special"] { color: #FFD100 !important; } /* about hover */ .header-nav-item a[href="/about"]:hover { color: #FF29C7 !important; } /* about active */ .header-nav-item--active [href="/about"] { color: #FF29C7 !important; } /* about folder hover */ .header-nav-item:hover>a, .header-nav-folder-item:hover a { color: #FF29C7 !important; } /* about 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: #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; } /* news hover */ .header-nav-item a[href="/news"]:hover { color: #59CBE8 !important; } /* news active */ .header-nav-item--active [href="/news"] { color: #59CBE8 !important; }
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.