Danners10 Posted August 26, 2021 Share Posted August 26, 2021 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 Link to comment
creedon Posted August 26, 2021 Share Posted August 26, 2021 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
Danners10 Posted August 26, 2021 Author Share Posted August 26, 2021 Sorry the password is Currandental. Thanks in advance Link to comment
Danners10 Posted August 26, 2021 Author Share Posted August 26, 2021 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 Link to comment
creedon Posted August 26, 2021 Share Posted August 26, 2021 With my code you can certainly get extra buttons on the desktop header. 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. 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
Danners10 Posted August 27, 2021 Author Share Posted August 27, 2021 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? Link to comment
Danners10 Posted August 27, 2021 Author Share Posted August 27, 2021 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
Danners10 Posted August 27, 2021 Author Share Posted August 27, 2021 Ok that wasn't so scary after all. I got the two buttons up for the header. Now to find out if I can get the smaller icons up there for mobile creedon 1 Link to comment
creedon Posted August 27, 2021 Share Posted August 27, 2021 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
Danners10 Posted August 27, 2021 Author Share Posted August 27, 2021 Great, thanks for your help with this. I'll wait to see Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment