Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Add Multiple Buttons to Header in 7.1


cvanuch

Question

  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

11 answers to this question

Recommended Posts

  • 1

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.

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 1
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;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

@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 post
  • 0
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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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 post
  • 0
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.

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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 post
  • 0
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;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...