Jump to content

Adding another button to the header

Go to solution Solved by Ziggy,

Recommended Posts

Hello, i am trying desperately to add another button to my Squarespace site. This is not working, i have tried multiple codes and it either adds it above the header and makes its own space which cuts out the header there or doesn't work at all! Please can someone help? This is the code i have used: 

<style>
    .custom-button {
        background-color: #DA1516;
        color: #FFFFFF;
        font-family: "Potano Sans", sans-serif;
        font-weight: 400;
        font-size: 0.75rem;
        text-decoration: none;
        border-radius: 20px;
        padding: 5px 15px;
        outline: 2px solid #FFFFFF;
        display: inline-block;
    }
    
    .header-container {
        position: relative;
    }
    
    .custom-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 20px; /* Adjust the value to change the horizontal position */
    }
</style>

<div class="header-container">
    <a class="custom-button" href="your-social-link">I'M HIRING</a>
    <!-- Rest of your header content -->
</div>
 

Thank you in advance! 

 

Lydia 

Link to comment
  • Solution

Try this code as a starting point, add to Footer Code Injection:

(replace the button text and add your URL)

<!-- add second button to header -->
<script>
var container = document.createElement("div");
container.classList = "header-actions-action header-actions-action--cta preFade fadeIn"
container.setAttribute("data-animation-role", "header-element")
container.setAttribute("style", "transition-timing-function: ease; transition-duration: 0.4s; transition-delay: 0.02")

var link = document.createElement("a");
link.classList = "btn btn--border theme-btn--primary-inverse sqs-button-element--primary"
  
<!-- replace "YOUR_URL_LINK_HERE" -->
link.setAttribute("href", "/YOUR_URL_LINK_HERE")
link.setAttribute("target", "_blank")

<!-- replace "YOUR BUTTON" -->
var linkText = document.createTextNode("YOUR BUTTON");
link.appendChild(linkText);
container.appendChild(link);

var neighbour = document.querySelector(".header-display-desktop .header-actions--right div:last-child");
var neighbourParent = document.querySelector(".header-display-desktop .header-actions--right")
neighbourParent.insertBefore(container, neighbour);
</script>
<!-- END add second button to header -->

Let me know how that goes.

Edited by Ziggy

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hello!

 

With the help of a member on here, i have now successfully got another button in the header of my site, however, i was wondering how i get it onto the mobile menu too. The code below is the one used and worked amazingly. I may be being stupid but is there a way this code could be modified, so it can be moved to the left of the header? 

Thanks in advance! 

Lydia 

 

<!-- add second button to header -->
<script>
var container = document.createElement("div");
container.classList = "header-actions-action header-actions-action--cta preFade fadeIn"
container.setAttribute("data-animation-role", "header-element")
container.setAttribute("style", "transition-timing-function: ease; transition-duration: 0.4s; transition-delay: 0.02")

var link = document.createElement("a");
link.classList = "btn btn--border theme-btn--primary-inverse sqs-button-element--primary"
  
<!-- replace "https://www.cdrecruitment.com/contact-1" -->
link.setAttribute("href", "/https://www.cdrecruitment.com/contact-1")
link.setAttribute("target", "_blank")

<!-- replace "I'M HIRING" -->
var linkText = document.createTextNode("I'M HIRING");
link.appendChild(linkText);
container.appendChild(link);

var neighbour = document.querySelector(".header-display-desktop .header-actions--right div:last-child");
var neighbourParent = document.querySelector(".header-display-desktop .header-actions--right")
neighbourParent.insertBefore(container, neighbour);
</script>
<!-- END add second button to header -->

 

Link to comment

If you add this code after the first code:

<script>
var container = document.createElement("div");
container.classList = "header-menu header-menu-cta"
container.setAttribute("data-animation-role", "header-element")
container.setAttribute("style", "transition-timing-function: ease; transition-duration: 0.4s; transition-delay: 0.02")

var link = document.createElement("a");
link.classList = "btn btn--border theme-btn--primary-inverse sqs-button-element--primary"
link.setAttribute("href", "/contact-1")
link.setAttribute("target", "_blank")

var linkText = document.createTextNode("I'M HIRING");
link.appendChild(linkText);
container.appendChild(link);

var neighbour = document.querySelector(".header-menu .header-menu-cta div:last-child");
var neighbourParent = document.querySelector(".header-menu .header-menu-cta")
neighbourParent.insertBefore(container, neighbour);
</script>

And this to Custom CSS:

.header-menu .header-menu-cta a[href^="/contact-1"] {
  color: var(--primary-brand);
  background-color: white;
  padding: 0.9em 1.5em !important;
  border: 2px solid var(--primary-brand) !important;
  margin-top: 10vh !important;
}
.header--menu-open .header-menu .header-menu-cta {
  height:20vh;
}
#siteWrapper .header-menu-cta .sqs-button-element--primary {
  z-index: 999;
  width:88%
}
.header-nav-list {
  margin-left:20px;
}

Let me know if that works.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hi @Ziggy

Thank you so much!

The mobile menu button has worked, thank you! However, it has overlapped the other button on the menu! Is there a way I can move it up slightly? 

The coded for moving the button to the left of the header sadly hasn't moved the button. 

Thank you so much for you help!

Lydia 

Link to comment

Hi Lydia, can you share your website URL so I can look at what's causing the overlap? Thanks!

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Thanks for that. I've tweaked the Custom CSS, can you replace the previous with this:

.header-menu .header-menu-cta a[href^="/contact-1"] {
  margin-top: 13vh !important;
}
.header--menu-open .header-menu .header-menu-cta {
  height:26vh !important;
}
#siteWrapper .header-menu-cta .sqs-button-element--primary {
  z-index: 999;
  width:88%
}

 

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Where have you placed the Custom CSS? None of it seems to be applying.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Yes, that's correct, do you have anything else in there? Any errors?

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
58 minutes ago, Kiwi13 said:

Oh, gosh, I had an error in one of the lines for another code we no longer needed!! oh, thank you so much, the button is now showing on the mobile menu, thank you!!!!! 

Nice one! Glad that's now working.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

One last question, how can i amend the original code so the button appears on the left-hand side of the header rather than on the right? This is so one button is on one side and the other is on the other if that makes sense? 

Thank you!

Link to comment
On 6/2/2023 at 9:16 PM, Kiwi13 said:

One last question, how can i amend the original code so the button appears on the left-hand side of the header rather than on the right? This is so one button is on one side and the other is on the other if that makes sense? 

Thank you!

Add this to Design > Custom CSS

.header-actions.header-actions--right>div:nth-child(3) {
    position: absolute;
    left: 0;
}

image.thumb.png.927927ede548e6ffa04d26f200b08a6b.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!)

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.