SkinWin
-
Posts
3 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by SkinWin
-
-
@Ziggy, just wanted to shout you out as I got the code originally from you!
-
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% }
Help with additional button to header - mobile view
in Customize with code
Posted
I DMed you. Thanks!