Jump to content

Add Multiple Buttons to Header in 7.1

Recommended Posts

  • Replies 15
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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!

Screen Shot 2020-05-24 at 7.47.07 PM.png

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

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 :-)

Screenshot 2020-07-25 at 19.06.58.png

Link to comment
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 :-)

Screenshot 2020-07-25 at 19.06.58.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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!

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...

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>

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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