Jump to content

Two different colored buttons in secondary header nav

Recommended Posts

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!

Link to comment
  • Replies 1
  • Views 256
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

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