Jump to content

How to add two buttons to a header?

Recommended Posts

  • Replies 6
  • 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

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

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

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

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.