Add Multiple Buttons to Header in 7.1

Site URL: https://theweightofhonormovie.com

Hello,

Does anyone know how to add more than one button to the header in Squarespace 7.1? I'd like to add another white button next to the existing "Host A Screening" button.

Thanks in advance!

There are two ways to do this

1. Convert the last 2 links in Navigation to buttons

2. Use jQuery to insert new button

If you want to do 1, let me know, I can give the code.

@tuanphan Thank you, option 1 sounds good! I'd like the "Educational License" link to be the second button, styled the same as the "Host A Screening" button.

header#header [href="/educational-license"] {
    color: #000;
    background-color: #fff;
    border-color: #fff;
    border-radius: 0.4rem;
    padding: 1.04rem 1.7368rem;
}
header#header [href="/educational-license"]:hover {
    opacity: 0.9;
}

@tuanphan Thank you for the code. It seems to work but the button size is slightly larger than the "Host a Screening" button. Also the other nav links aren't vertically centered with the buttons. I've attached a screenshot. Let me know if there's a way to adjust the code to fix those issues. Thanks again!

10 hours ago, cvanuch said:

@tuanphan Thank you for the code. It seems to work but the button size is slightly larger than the "Host a Screening" button. Also the other nav links aren't vertically centered with the buttons. I've attached a screenshot. Let me know if there's a way to adjust the code to fix those issues. Thanks again!

You can adjust padding in above code

Hello! https://amethyst-ranunculus-36mm.squarespace.com/

I am designing this site, link above. I tried to apply your code @tuanphan.  It didn't work?? I would like to make 'Sign in" in the site header an additional (second) button to the 'Apply" button currently active and displaying. I would like for them to be the same colours and style. I did edit the code you provided above to be applicable to the colours and size... but it didn't work. It simply didn't apply the code. Please advise!

Thanks so much :-)

8 hours ago, NinaB said:

Hello! https://amethyst-ranunculus-36mm.squarespace.com/

I am designing this site, link above. I tried to apply your code @tuanphan.  It didn't work?? I would like to make 'Sign in" in the site header an additional (second) button to the 'Apply" button currently active and displaying. I would like for them to be the same colours and style. I did edit the code you provided above to be applicable to the colours and size... but it didn't work. It simply didn't apply the code. Please advise!

Thanks so much :-)

Your site is private. You can setup password & share url. We can check easier.

Ah sorry about that @tuanphan! I have published the site now so it should be visible.

https://amethyst-ranunculus-36mm.squarespace.com/

On 7/29/2020 at 4:03 PM, NinaB said:

Ah sorry about that @tuanphan! I have published the site now so it should be visible.

https://amethyst-ranunculus-36mm.squarespace.com/

Add to Home > Design > Custom CSS

header#header [href*="enriched.co.za"] {
    color: #c8126e;
    background-color: #c4d600;
    border-color: #c4d600;
    padding: .4em 1em;
    border-radius: 300px;
}

Hello @tuanphan - thank you for the code. It does not work, however. (I see you put "enriched.co.za"?? I made "Sign in"  a page, not a link, and still it doesn't work???

I used the following code in the header code injection:

header#header [href*="sign-in"] {
    color: #c8126e;
    background-color: #c4d600;
    border-color: #c4d600;
    padding: .4em 1em;
    border-radius: 300px;
}

Nothing happened....??? Thanks in advance for your help!

3 hours ago, NinaB said:

Hello @tuanphan - thank you for the code. It does not work, however. (I see you put "enriched.co.za"?? I made "Sign in"  a page, not a link, and still it doesn't work???

I used the following code in the header code injection:

header#header [href*="sign-in"] {
    color: #c8126e;
    background-color: #c4d600;
    border-color: #c4d600;
    padding: .4em 1em;
    border-radius: 300px;
}

Nothing happened....??? Thanks in advance for your help!

header#header [href="/sign-in"] {
    color: #c8126e;
    background-color: #c4d600;
    border-color: #c4d600;
    padding: .4em 1em;
    border-radius: 300px;
}

Hi @tuanphan would you be so kind to help me out as well

i'm trying to add a second button "Call Us" next to my "Login/Sign up" Button in the header...

would you be so kind to help me with this?

www.laundry-concierge.com

Thanks!

Haf

On 1/14/2021 at 7:49 PM, HXF said:

Hi @tuanphan would you be so kind to help me out as well

i'm trying to add a second button "Call Us" next to my "Login/Sign up" Button in the header...

 

would you be so kind to help me with this?

www.laundry-concierge.com

Thanks!

Haf

Do you use Personal or Business or Commerce Plan?

Hi @tuanphan, I'm also trying to use the code you provided to add an additional button to my header, but I'm not sure why it's not working. Any advice would be greatly appreciated! thank you!!

https://mushroom-turquoise-9rne.squarespace.com
Password: siera

I added the below code in the header code injection:

<style> 
header#header [href=“/order-online"] {
    color: #000;
    background-color: #fff;
    border-color: #fff;
    border-radius: 0.4rem;
    padding: 1.04rem 1.7368rem;
  }
  <style>

On 3/11/2022 at 2:54 AM, megpow said:

Hi @tuanphan, I'm also trying to use the code you provided to add an additional button to my header, but I'm not sure why it's not working. Any advice would be greatly appreciated! thank you!!

https://mushroom-turquoise-9rne.squarespace.com
Password: siera

I added the below code in the header code injection:

<style> 
header#header [href=“/order-online"] {
    color: #000;
    background-color: #fff;
    border-color: #fff;
    border-radius: 0.4rem;
    padding: 1.04rem 1.7368rem;
  }
  <style>

It looks like you solved? I see order online is a button here