Multi-coloured navigation keeps breaking

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;
}

Hi. It looks fine here. See video: https://www.loom.com/share/4a91e54cd0e94804ad86e0780caa9208

On 7/5/2021 at 9:46 PM, MrPink said:

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;
}

Also, need help on these?

Site URL – https://www.pbsconsultancy.net/

1. (Mobile – Our support) Reduce space between Be aware and Be resourceful

https://www.pbsconsultancy.net/our-support

2. (Tablet – Footer) Email is cut to 2 lines

https://www.pbsconsultancy.net/

3. (Tablet – Children and young people) Text is cut to next line.

https://www.pbsconsultancy.net/children-and-young-people

4. (Tablet – Our impact) Text is cut to next line.

https://www.pbsconsultancy.net/our-impact

5. (Tablet – Resources) Increase space between 3 column?

https://www.pbsconsultancy.net/resources