Two different colored buttons in secondary header nav

Hi folks,

I'm trying to create two different colored buttons in the secondary header nav. 

I'm working with Brine, so some of my pages are index pages and have a banner, some are not (button color needs to be different on the pages without a banner)

I've tried a bit of css, but none of it seems to be working on mobile. 

/* HEADER BUTTONS **********/

.Header-nav--secondary .Header-nav-item:first-child{
   background: none!important;
   border: 2px solid #fff!important;
   color:#fff !important;
}

.Mobile-overlay-nav-item:first-child{
   background: #fff!important;
   border: 2px solid #fff!important;
   color: #fff!important;   
  }

.Header-nav--secondary .Header-nav-item:hover:first-child{
   background: white!important;
   border: 2px solid #fff!important;
   color: #000 !important;
   opacity:0.9;
}

.Header-nav--secondary .Header-nav-item:last-child{
   border: 2px solid #fff!important;
   opacity:0.9;
   color:#000 !important;
   opacity:0.9;
}

.Mobile-overlay-nav-item:last-child{
   border: 2px solid #fff!important;
   color:#000!important;
  }

.Header-nav--secondary .Header-nav-item:hover:last-child{
   background: white!important;
   border: 2px solid #fff!important;
   color: #000 !important;
   opacity:1;
}

The above code doesn't seem to do anything for mobile though.

Any suggestions? 

Goal: 

Buttons on Index Pages with banner: 1 white, 1 outlined white

Buttons on other pages (no banner): 1 blue, 1 outlined blue

Site: https://grape-dove-n6ym.squarespace.com/

PW: piper

Thanks a lot for any help with this!

It looks like you solved this?