Adding another button to the header

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 

Hi Ziggy, 

Thank you so so much! That has worked! 

Thank you again! 

Lydia 

@Ziggy - Hi as this worked so well, i am being asked to move the button to the left side of the header.. is this possible? 

I am also wondering how i get this code to work on the phone menu!

Your help would be appreciated greatly! 

Lydia 

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

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.

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 

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

Hi Ziggy, It is https://www.cdrecruitment.com/ - Squarespace URL is https://rust-frog-dwnt.squarespace.com/ 

Thank you!

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%
}

Hi @Ziggy No luck sadly!

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

Design - Custom CSS and in the text box - is that correct?

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

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

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.

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!

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;
}