Hi all,
With the help of code found elsewhere on this forum, I've managed to add an additional button to my header. However, on mobile view, the two buttons that I have overlap (see attached image). Was wondering if anyone could help me with this. Here is my current code/CSS:
Would greatly appreciate any help.
Code injection to footer:
<!-- 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.google.com" -->
link.setAttribute("href", "https://www.google.com")
link.setAttribute("target", "_blank")
<!-- replace "ONLINE PAYMENT" -->
var linkText = document.createTextNode("ONLINE PAYMENT");
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 -->
<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", "https://www.google.com")
link.setAttribute("target", "_blank")
var linkText = document.createTextNode("ONLINE PAYMENT");
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>
<script>
$(document).ready(function() {
$('footer.sections .button-block').insertBefore('.header-display-desktop .header-title-nav-wrapper');
$('header#header .button-block').clone().insertBefore('.header-menu-cta a');
});
</script>
CSS:
.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%
}