Jump to content

How to add second button to menu navigation

By Kalie, in Customize with code

Go to solution Solved by tuanphan,

Recommended Posts

Kalie Level 5

Kalie

Posted
Posted (edited)

Is there a way to add a second button to the navigation menu? My goal is to position it on the left side in desktop and stacked in mobile. An alternative would be positioning it next to the existing button. (I've included some screenshots for reference.) I'd like to utilize the site's existing button styles if possible.

Some background – the client originally asked to include a Google Reviews graphic in the menu, linking to their Google My Business profile. I figured a button/link would be easier but I might be wrong.

I tried 6+ different tutorials with no luck. Any recommendations would be greatly appreciated!

 

SS-1.png

SS-2.png

Edited by Kalie
  • Replies 4
  • Views 468
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

mirjamhlastan
mirjamhlastan

@Kalie additional resource is also a free code snippet from GhostPlugins. You can find it here! I've used a lot of plugins and custom templates from GhostPlugins and they are simple and easy to a

Kalie
Kalie

@CassAggett @tuanphan @mirjamhlastan thank you so much!

tuanphan
tuanphan

You can use this code to Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(docume

Posted Images

CassAggett Level 8

CassAggett

Posted
Posted (edited)

@Kalie Check out this post (EDIT: Looks like the Inside the Square link in the linked post has been updated - you can find it here, then see additional code in the post if needed):

 

Edited by CassAggett

Instruction: How to set a site-wide password

If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆

Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business.

WEBSITE • INSTAGRAM

 

  • Solution
tuanphan Level 18

tuanphan

Posted
  • Solution
Posted

You can use this code to Website Tools > Code Injection > Footer 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('<a class="btn btn2 btn--border theme-btn--primary-inverse sqs-button-element--primary" href="/contact">Contact Me</a>').prependTo('.header-display-desktop');
});
</script>

image.thumb.png.7391301ec08a883f7510934215922f8c.png

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!)

mirjamhlastan Level 4

mirjamhlastan

Posted
Posted

@Kalie additional resource is also a free code snippet from GhostPlugins. You can find it here!

I've used a lot of plugins and custom templates from GhostPlugins and they are simple and easy to apply, have clear step-by-step instructions, and even the code is written in a way that you know exactly where the specific plugin code starts and ends which is very helpful especially when you have a long piece of code to work with.

Hope this helps 🙂

Cheers from Berlin,
Mirjam

Screenshot 2024-10-14 at 23.40.33.png

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources