Jump to content

How to add two buttons to a header?

Recommended Posts

  • Replies 10
  • Views 8.9k
  • Created
  • Last Reply

Top Posters In This Topic

There are two ways to do this

W1 Free). Insert 2 Link items to Main Navigation > Use CSS to turn 2 links to button.

W2 ($$$). Add default button in Header Layout (Edit Site Header > Header Elements > Enable Button)

Next use JavaScript to add 2rd button to right of first button.

Your site is private.

Can you setup password & share url?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Of course. Ive made that password protected. I can DM you the password. 

Maybe button isn't the right request but I think the CSS change makes the most sense here. I currently have two links which direct people towards two different language versions of the site. The current links are set centrally, and I'd like to have these two links separated, by aligning them to the right, possibly with the option of changing the colour too.

 

Link to comment

To make them button, add this to Home > Design > Custom CSS

.header-nav-item [href*="en"] {
    background: red;
    color: white !important;
    padding: 5px 10px !important;
}
.header-nav-item [href*="pt"] {
    background: red;
    color: white !important;
    padding: 5px 10px !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 11 months later...
22 hours ago, TessaRoseJackson said:


Hi Tuanpan, I can only add JS to the Head or Footer, not the <body> of the page. Where do I add the JS to duplicate the button in the header?

Schermafbeelding 2021-04-25 om 11.09.36.png

Schermafbeelding 2021-04-25 om 11.09.28.png

Hi. Which JS? The code I shared above is CSS (Add to Design > Custom CSS).

If you want to add code before </body>, you need to add to FOOTER

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...
On 5/19/2023 at 12:45 AM, EmilyMMorris said:

@tuanphan Could you please help me with adding a second button to my website. I currently have a "Get Started" button to the right in my header, but next to that, I would like to add something that says Sign In and when it is clicked it will go to our outside portal domain. Help?

What is your site url? We can help easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...

@tuanphan Hello!

Like the others who have posted here, I too am looking to create a new button in the header of my site. The url is www.digilangua.net. 

I have posted the code that you have provided and have attempted to create a button labeled "Teacher Login" in the header to which to attach an external link.

I tried adding the code you provided in the CSS space, but nothing happens, giving me the idea that I am the one not making it work correctly. Do you have any advice, please? 

Link to comment
On 11/14/2023 at 6:04 AM, JenD said:

@tuanphan Hello!

Like the others who have posted here, I too am looking to create a new button in the header of my site. The url is www.digilangua.net. 

I have posted the code that you have provided and have attempted to create a button labeled "Teacher Login" in the header to which to attach an external link.

I tried adding the code you provided in the CSS space, but nothing happens, giving me the idea that I am the one not making it work correctly. Do you have any advice, please? 

You mean add a second button next to current or?

image.png.edf0f6b99d6e2be0f77e7c52fa183051.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.