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

Add multiple buttons to header nav in Squarespace 7.1


catg

Question

I'm trying to create a bilingual site and would like to have the language links as buttons on the header navigation, but it seems Squarespace 7.1 interface only allows for one custom button, social links and cart in the header navigation. I created a PT button for the Portuguese site and would like to create another button, EN for the English site. It there any way to add another button via code to the site header?

810282073_Capturadeecra2020-01-16as14_39_49.png.a4def25ece7b274fb88406e1184db10c.png831694495_Capturadeecra2020-01-16as14_39_57.png.3d89b5a387e5922598a6680278ca1713.png1079697984_Capturadeecra2020-01-16as14_34_40.thumb.png.0b5eca0d778f43eceaa14ee7a1dbe6aa.png

Link to comment

Recommended Posts

  • 0
On 4/15/2021 at 6:04 PM, creedon said:

@LXK

Have you considered coming at this from the other direction? Put those pages in Main Navigation making them links. Then style the links as buttons with CSS but only for desktop?

My code is great for adding a few extra cta buttons along side regular menu links but not so good at being a replacement for site navigation. That is because of how SS lays out site navigation and cta area.

I've just tried taking out the margins and padding on mobile and it doesn't look good.

1936005613_ScreenShot2021-04-15at10_01_05AM.thumb.png.aafa0db8832dbba6ba47f81d7610fca6.png

This is due to the mobile layout site nav (top of screen) and cta area (bottom) on mobile.

There are several forum posts on making site nav links look like buttons.

Thanks @creedon 🙂

I think you're right, that would have been a better way to look at this.

I did search for forums on making the navi links buttons (desktop only) but no luck, perhaps I wasn't using the correct terms to search?

Link to comment
  • 0

I have updated my Sep. 10th, 2020 code post. Following are the changes.

  • better support for mobile
  • fix an issue with desktop buttons continuing to display when in mobile
  • allow user to more easily change the direction and order of the buttons. using LESS mixins the choices are row or column direction and normal or reverse order

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

This code works great by I a stumped on one thing. How do I get the buttons to display horizontally on desktop (which they are now) but stack vertically on mobile?

Site is www.blackbookbar.com

Thanks!

Edited by cchs
Added additional info
Link to comment
  • 0

@cchs

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
On 11/3/2020 at 8:31 AM, creedon said:

No. You need to target the correct element.

Take the font properties you added out of the CSS I provided above and add the following to Design > Custom CSS.

.header-actions-action--cta a {

  font-family: 'Inter';
  font-weight: 400;
  
  }

Let us know how it goes.

So I tried to follow this and it worked, however, is there only a button specific code for this? I have 2 buttons - Chinese and English translation, both has different fonts. Is there a way that I can only change the Chinese button font? Also, I would highly appreciate it if you can help me with hiding 'book a consultation' button when I'm on Chinese page and hide '咨询页面' when I'm on English page. Thank you!
image.png.037bb8a7d2501f9cdccc70f271a356d6.png

URL: educareguardian.com
Password: educare4u

Link to comment
  • 0
On 8/1/2021 at 8:36 AM, creedon said:

@TPC_Rem

Did you solve this issue?

 

 

Hi! Yes, I was able to solve the issue.

I used these two codes - for desktop and for mobile and add on each english page. And change 2 to 1 for my other language page.

 

<style>
div.header-actions-action.header-actions-action--cta > a:nth-child(2) {
  display: none !important;
  }
</style>

<style>
div.header-menu-cta > a:nth-child(2) {
display: none !important;
  }
</style>

 

Edited by TPC_Rem
Link to comment
  • 0

@tuanphan Is there a way to make the two orange outlined buttons on my site go side-by-side on the right of the nav like the image I'm attaching? I used the code from https://www.ghostplugins.com/steps/9thnk3tg to get started with the double nav buttons.

Also is there a way to copy the exact style of the dominant button (the one that says Book and Appointment) so that the Telemedicine button looks the same, without having to manually tweak the css to try and match it? You can see I didn't do a perfect job of matching the style with my CSS. I want to make sure both buttons are styled the same for mobile, desktop etc.

https://harp-robin-fsew.squarespace.com/ PW: hello

Screen Shot 2021-08-20 at 3.43.49 PM.jpg

Edited by vireshwara
Link to comment
  • 0
On 8/21/2021 at 3:49 AM, vireshwara said:

@tuanphan Is there a way to make the two orange outlined buttons on my site go side-by-side on the right of the nav like the image I'm attaching? I used the code from https://www.ghostplugins.com/steps/9thnk3tg to get started with the double nav buttons.

Also is there a way to copy the exact style of the dominant button (the one that says Book and Appointment) so that the Telemedicine button looks the same, without having to manually tweak the css to try and match it? You can see I didn't do a perfect job of matching the style with my CSS. I want to make sure both buttons are styled the same for mobile, desktop etc.

https://harp-robin-fsew.squarespace.com/ PW: hello

Screen Shot 2021-08-20 at 3.43.49 PM.jpg

Hi,

You mean hover effect for left button?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 8/20/2021 at 1:49 PM, vireshwara said:

Also is there a way to copy the exact style of the dominant button (the one that says Book and Appointment) so that the Telemedicine button looks the same, without having to manually tweak the css to try and match it?

Please see the following.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

Hello,

I am trying to create a bilingual site by adding two buttons above the exiting button. I tried the code shared here but it didn't work. 

Here is the website www.pmo-remote.com

Thanks!

 

Edited by Yasmina
Link to comment
  • 0

@Yasmina

You have two issues.

First, the code you have there is a Javascript code fragment, not CSS. Only CSS can go in Design > Custom CSS.

Second. The code shown, being a fragment of Javascript won't work anywhere that Javascript can work. You need to install the code as mentioned in my Sep. 10th, 2020 post. Making sure to visit the cited Add Buttons to Header link.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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