Jump to content

Place Floating button under hamburger menu

Go to solution Solved by sorca_marian,

Recommended Posts

Site URL: https://braceforimpact.squarespace.com/new-home

Hi @tuanphan

I found this code from you to add a floating button to my site: 

https://braceforimpact.squarespace.com/new-home

PW: Braceforimpact12

 

<a href="https://braceforimpact.squarespace.com/contact" class="tp-button">Get in touch</a>
<style>
  a.tp-button {
      background-color: #F95203 !important;
    font: 15px;
font-family: 'larken', sans-serif;
font-weight: 700;
font-style: normal;
    text-transform: uppercase;
    letter-spacing: .04rem;
    color: white !important;
    padding: 10px 30px;
    position: fixed;
    bottom: 0px;
    right: 20px;
    z-index: 9999
  }
</style>

 

And I've also created a hamburger menu for desktop. Is there any way to place the "get in touch" button under the menu when its open?

 

Link to comment
1 hour ago, Lian said:

@Ziggy do you know a solution for to place the "get in touch" button under the menu when its open?

I'm not sure where you want this to go?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hi @Lian,

You should be able to add that button without custom code, through the menu editor and it will appear in the menu

 👨‍🔧👨‍💻 Squarespace plugins

🙋‍♂️ Squarespace Custom Web Development & Design

📅 Notion alternative

📹 Squarespace Tutorials for free - YouTube📹 

💯🚀 I have worked on over 200 Squarespace sites with custom code for over 9 years

🙋‍♂️ Let's connect on LinkedIn

 

Link to comment
56 minutes ago, sorca_marian said:

You should be able to add that button without custom code, through the menu editor and it will appear in the menu

I agree, that's in the mobile menu, you can also adjust the z-index so your custom button appears under the menu background.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

Something like this?

The CSS - only when the menu is open 

body:has(header[data-section-theme="bright"]) .tp-button {
    right : 50%;
    translate: 50% 0;
    font-size: 30px;
}

@media (max-width : 767px) {
    body:has(header[data-section-theme="bright"]) .tp-button {
        font-size : 16px;
    }
}

 

Screenshot 2024-09-18 at 12.05.34.png

Screenshot 2024-09-18 at 12.07.21.png

 👨‍🔧👨‍💻 Squarespace plugins

🙋‍♂️ Squarespace Custom Web Development & Design

📅 Notion alternative

📹 Squarespace Tutorials for free - YouTube📹 

💯🚀 I have worked on over 200 Squarespace sites with custom code for over 9 years

🙋‍♂️ Let's connect on LinkedIn

 

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.