Jump to content

Adding two buttons to header

Recommended Posts

Site URL: http://www.currandental.com.au

I am building a website for a dentist. He would like a book now buttons and a phone number button to be in the header of the site. I have added a button and a link with the phone number, but he was wanting the phone number to be visible when mobile view and currently all of the menu at the top disappears into the hamburger menu when it is mobile.

I was wondering if anyone knows custom code to have the two buttons at the top and when it goes to mobile they remain there next to the hamburger icon. Obviously they would need to be minimised to a phone icon and a calendar to fit them in when mobile. I have attached a website that does this well. I've shown the desktop view of the buttons and then the mobile view. Is this possible or am I needing to employ a web developer for this?

Thanks so much

Screen Shot 2021-08-26 at 1.13.26 pm.png

IMG_6BB51113C80A-1.jpeg

Link to comment

Your site is private.

Please set up a site-wide password.

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

Quote

I was wondering if anyone knows custom code to have the two buttons at the top

Please see the following.

 

 

Quote

when it goes to mobile they remain there next to the hamburger icon

I'm not aware of any code to do this. Normally the CTA button is located at the bottom of the mobile menu.

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thanks for your help. I have seen it quite a bit on dental websites where they need to have the phone number and booking buttons visible on mobile. I have attached two examples of this. If this isn't possible that's fine i'll look in to a mobile information bar or something else.

Thanks

IMG_6173.jpg

IMG_6174.jpg

Link to comment

With my code you can certainly get extra buttons on the desktop header.

1417701536_ScreenShot2021-08-26at12_55_51PM.png.392118f77152bf6d95170a6c7045fcd2.png

As to the effect you want on mobile. I'm not aware of code that does that. It looks a little tight to be fitting two icons up there. It may be a bit of a challenge to get them in there as SS didn't provide an area there for icons to go. So this would require some restructuring with some Javascript, if it could be achieved.

649444430_ScreenShot2021-08-26at12_56_32PM.thumb.png.55d200ebba6ab9e9883fe13215d0cffa.png

You will want to do is identify some suitable icons. Svg icons would be the most flexible as that can be sized up and down and maintain nice clarity for a range of sizes.

You will may want to hide the default buttons SS provides for CTA on mobile if you are going to use your own.

SS does have a mobile information bar. Please see Adding a mobile information bar.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thank you so much for your help. I have just changed the mobile version logo to an abbreviated one for mobile. I think this may help with the space problem. I have created two icons but I was a bit confused by what you responded with. You mentioned to create SVG icons but you said previous to that you don't think they could be added to mobile with code? I have attached PNG versions but I also have SVG which I am not able to attach to this platform. 

Sorry i'm very new to code. Do I literally just copy all of the code you sent through in the link above that you supplied for someone else? Or do I need to tweak it to get the result in my colours etc that you showed above? 

CD_Icons_Appoint.png

CD_Icons.png

Link to comment

Just to clarify is my understanding correct. I replace this code:

 text : '[enter button text here between single quotes]',
          url : '[enter url here between single quotes]'

With this code:

 

 {
      
        text : 'enter button text here 1',
        url : 'enter url here 1'
        
        },
      {
      
        text : 'enter button text here 2',
        url : 'enter url here 2'
        
        },

and that will add two buttons? Or do I add that second piece of code to the end of the entire first part of code? Sorry excuse my lack of understanding 🙂 Really appreciate this support.

Link to comment

Excellent!

To clarify my code won't do the small buttons you desire. It was only designed to replicate the SS built-in CTA ( call to action ) button.

I'm not aware of any code that will do the small buttons as you cited in your examples. That doesn't mean that it hasn't been done. Or, that somebody couldn't do it.

I suggest giving it a few days to see if someone can pitch in with some code.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.