Change the Color of a Secondary Navigation Button (Brine)

Looking to keep one button solid and other one outline only. Squarespace Design allows only for one button change.

Any CSS code out there for this?

Can you share link to your site?

Not public yet but attaching home page screenshot

Difficult to help without checking site url.

https://jimmy-lama-jd26.squarespace.com/config/design

I managed to change it to outline but now the hover effect aint working. hELP

Here is the CSS code I used:

//NAVIGATION BUTTON COLOR CHANGE
.Header-nav-item[href="/lets-eat"] {
    background: transparent !important;
    border: 2px solid #B98847 !important;
  color: #00000 !important;
}

19 hours ago, jlama said:

I managed to change it to outline but now the hover effect aint working. hELP

Here is the CSS code I used:

//NAVIGATION BUTTON COLOR CHANGE
.Header-nav-item[href="/lets-eat"] {
    background: transparent !important;
    border: 2px solid #B98847 !important;
  color: #00000 !important;
}

remove !important

Looks better on the homepage but now when I go to other pages , my second button shows orange text when it should be white. 

5 minutes ago, jlama said:

Looks better on the homepage but now when I go to other pages , my second button shows orange text when it should be white. 

try this code to create both hover effect

.Header-nav-item[href="/lets-eat"] {
    background: transparent !important;
    border: 2px solid #B98847 !important;
  color: #00000 !important;
}
.Header-nav-item[href="/lets-eat"]:hover {
    background: red !important;
    border: 2px solid red !important;
  color: green !important;
}

So much better! Now I have to change the default button text color to white see if it gets better on the other pages.

On 5/20/2020 at 9:44 PM, jlama said:

So much better! Now I have to change the default button text color to white see if it gets better on the other pages.

Have you solved yet?

Yes thanks

Hi @tuanphan,

I could use your help with fine tuning this.

I was able to css two different style buttons in the secondary nav. However this works only on image overlay, but not on pages without a banner. I'd like to css the first button to only have a (blue) 2px border.

Right now, the first button is not visible (only on hover).

Compare homepage vs. contact page

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

Thanks a lot for taking a look!

On 12/5/2020 at 4:52 AM, MariaFY said:

Hi @tuanphan,

I could use your help with fine tuning this.

I was able to css two different style buttons in the secondary nav. However this works only on image overlay, but not on pages without a banner. I'd like to css the first button to only have a (blue) 2px border.

Right now, the first button is not visible (only on hover).

Compare homepage vs. contact page

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

 

Thanks a lot for taking a look!

 

Add this CSS

body:not(.homepage) .Header-nav--secondary a.Header-nav-item[href="/referrals"] {
    border: 2px solid black !important;
    color: black !important;
}

Thank you @tuanphan The code works if only the homepage had a banner, but other pages with a banner don't end up having the same buttons as the ones on the homepage.

How can I define different button styles for pages with a banner (e.g. 'Our Team'), and pages without (i.e. 'Contact'? 

Not sure if this is a bigger challenge, or has an easy solution. 

Thanks again for your support, it's appreciated!

On 12/10/2020 at 10:53 AM, MariaFY said:

Thank you @tuanphan The code works if only the homepage had a banner, but other pages with a banner don't end up having the same buttons as the ones on the homepage.

How can I define different button styles for pages with a banner (e.g. 'Our Team'), and pages without (i.e. 'Contact'? 

Not sure if this is a bigger challenge, or has an easy solution. 

Thanks again for your support, it's appreciated!

Add to Page Header. Disable Ajax Loading if the code doesn't work.

<style>
  .Header-nav--secondary a.Header-nav-item[href="/referrals"] {
    border: 2px solid green !important;
    color: violet !important;
}
</style>

@tuanphan you seem to be pretty knowledgeable and would love it if you could please help me out with something.  I'm trying to figure out how to change the button color of "Meet Your Coach" Button that I've added to the banner image area.  Any insight would be greatly appreciated, thank you!

On 4/16/2021 at 7:49 PM, philipanthonymangan said:

@tuanphan you seem to be pretty knowledgeable and would love it if you could please help me out with something.  I'm trying to figure out how to change the button color of "Meet Your Coach" Button that I've added to the banner image area.  Any insight would be greatly appreciated, thank you!

 

Can you share link to your site? We can help easier