Jump to content

Adding Code to Navigation Bar

Recommended Posts

Posted

I would like to add the "Book Now" button (from Timely which provided a line of code) to the navigation bar. Currently, it's in the header. 

What is the best way to do this? Would really appreciate the advice! :)Capture.thumb.JPG.dabd90360d1c29c4af6cb5c12b57cb9d.JPG

  • Replies 10
  • Views 4.6k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted

Do you have a link to your website? I would add the text link only to your secondary navigation, then go to DESIGN > SITE STYLES and style your secondary navigation into a button.

If you're not on a Brine template, then you'll have to use custom CSS to style the last link to look like a button.

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Posted
On 1/8/2020 at 3:35 PM, Vigasan said:

Do you have a link to your website? I would add the text link only to your secondary navigation, then go to DESIGN > SITE STYLES and style your secondary navigation into a button.

If you're not on a Brine template, then you'll have to use custom CSS to style the last link to look like a button.

On 1/8/2020 at 3:38 PM, tuanphan said:

Add a "Book Now" link to Navigation, then share link again. We can give code to make link to button.

Thank you for your replies! I should have mentioned in the question that the button opens up a widget below. 

Capture2.thumb.JPG.ccf6f2a9cb9a5ebc444b50e8537e31f1.JPG

And the code for the button: 

<script>new timelyButton("beyondskin1", {"style":"dark"});</script>

I couldn't find a way to add this to the navigation

Capture3.thumb.JPG.df472a5a898d1e62f08543857be87ab2.JPG

This is the website: https://www.beyondskin.co/ Template is "Five"

Much appreciated!
 

 

Posted

Unfortunately since this would require a little more work, it may be easier for you to do a booking via the link in my signature. The steps are as follows if you want to try it out yourself though.

  1. Add the button into a code block in your footer
  2. Use Javascript .appendTo function to move the button after the last menu item
  3. Use CSS to style it as needed so it looks in line with the rest of the content.

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

  • 1 year later...
Posted

Hi I need help. I think I almost have the same problem.

I'm looking for code to change the navigation bar style.

If it is perhaps possible

Quote

Current Navigation bar looks like this:

image.thumb.png.f640082867882ac10da66be3dc6d0699.png

 

 

Quote

What I am hoping them to look like is like this:

image.png.d431135cc9ddb604d2ecf47082372ae5.png

 

I hope it is possible thank you in advance.

Posted
On 3/5/2021 at 10:11 PM, Mie_MIe said:

Hi I need help. I think I almost have the same problem.

I'm looking for code to change the navigation bar style.

If it is perhaps possible

 

 

 

I hope it is possible thank you in advance.

Can you share site url? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 8 months later...
Posted
On 12/11/2021 at 2:12 AM, foodstash said:

Hi there, I'm hoping to add a DONATE NOW button to my navigation bar that will take you straight to an embedded form. My current navigation bar is attached below along with what I am hoping to do. 

 

Here the url for my site https://www.foodstash.ca/

Screen Shot 2021-12-10 at 11.10.39 AM.png

56111670-3512-4D92-82DB-E39E5D8DFA0E_4_5005_c.jpeg

Can you share embed form code? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.