Add multiple buttons to header nav in Squarespace 7.1

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

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.

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.

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?

@LXK

Check out Squarespace: Navigation Tricks - Add button to navigation bar by @tuanphan.

Let us know how it goes.

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

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!

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

Sorry... It is blackbookbar.com and is currently public

@cchs

I see the issue, looking into it.

@cchs

I have updated my September 10, 2020 code post. The main change is to force column display of buttons on smaller screen widths.

Let us know how it goes.

Brilliant. Works like a charm! Thank you so much!

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!


URL: educareguardian.com
Password: educare4u

@TPC_Rem

Did you solve this issue?

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>

@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

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

Hi,

You mean hover effect for left button?

On 8/22/2021 at 2:16 AM, tuanphan said:

Hi,

You mean hover effect for left button?

@tuanphan I just want to get the 2 orange buttons over on the right side of the nav and copy their styles (hover etc) if possible. https://harp-robin-fsew.squarespace.com/ PW: hello

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.

2 minutes ago, creedon said:

Please see the following.

Let us know how it goes.

I already got the buttons to show up, I just want them to both be on the right side of the nav.

On 8/30/2021 at 11:38 AM, creedon said:

Please see the following.

Let us know how it goes.

@creedon It was more complicated than I'm used to but it appears to be working now! Thanks a lot.

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!

@Yasmina

Is the code installed now? If not, please install it and then we can take a look at your issue.

@creedon The code has now been added.

I get the message -> Syntax Error on line 1

@Yasmina

Could you post a screenshot of the error here, showing as much of the code as possible? Unfortunately from what I can see from here there isn't enough info to know exactly what is going on.

@creedon

Here is the screenshot

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