Adding button to header using Code Injection

mwagner · March 18, 2021

Help - I'm trying to add a small button that says "Give Now" to our site header to the left of the search icon and links to this page: https://secure.squarespace.com/checkout/donate?donatePageId=57f3ed0a29687fcf1302b611

Our site design is Adrionack and doesn't give me the option to create a button in the header area so it has to be done with code injection but whenever I use this code for a link it goes behind the header.

<!DOCTYPE html>
<html>
<head>
<style>
.button {
float: right;
background-color: green;
border: none;
color: white;
padding: 1px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Source Sans Pro;
font-size: 12px;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
letter-spacing: 3px;
margin-top: 20px;
margin-bottom: 12px;
margin-right: 500px;
margin-left: 12px;
cursor: pointer;
}
</style>
</head>
<body>

</body>
</html>

ingrid.villamagdalen · March 19, 2021

I'm a total beginner on custom code, but I did pick up that if you want something to be in front of something else, you have to give it an index to make it rank in front. In some examples they say to use index 99 (or probably it is .99) and in the code that I was given for my Back to Top button it was index 1 as part of the Custom CSS to keep it in front.

In my "back-to-top button" code, this is the part of the button's Custom CSS that makes the button stay in front:
z-index:1!important;
This instruction is in a series of all other things such as font-size, color, padding, etcetera, just like you have a whole list above. But I know that this part about index regulates that the button stays in front of everything. It stays e.g. in front of my footer.

mwagner · March 19, 2021

So I need to add something to the Custom CSS as well? I inherited this site when I started and the Custom CSS on it is a big mess and I'm an absolute beginner with CSS.

.folder-nav{
background-color: #ffffff;
}

#folderNav ul{
padding: 0;
}
#folderNav ul li {
margin-left: 0px !important;
margin-right: 0px !important;
}

#folderNav ul li a, #folderNav ul li a:visited {
color: #666666;
}

.nav-open .main-nav .nav-wrapper, .nav-open-hover .main-nav .nav-wrapper, .sqs-style-mode .main-nav .nav-wrapper, .always-show-nav .main-nav .nav-wrapper
{
padding:0px 75px;
}

.main-nav .folder .folder-child-wrapper ul.folder-child
{
margin-top:10px;
}

.main-nav ul li a, .footer-nav ul li a, #folderNav ul li a, #categoryNav ul li a
{
padding-top:20px;
padding-bottom:15px;
}

/*
.main-nav ul li:last-child
{
background-color: #c4b783;
}
*/

.nav-wrapper {
padding: 0px 0px 0px;
}

.logo-wrapper {
float: left;
}

.icon-menu::before {
width: 60px;
}
#header {
padding: 0px;
}
.main-image-wrapper {
padding-top: 0px;
}

.main-nav .folder .folder-parent>a:first-child:before, .footer-nav .folder .folder-parent>a:first-child:before {
content: '';
margin-right: 0em;
font-size: 10px;
}

.sqs-block-button .sqs-block-button-element--small
{
padding:5px 10px
}

#footer {
border-top:3px solid #0e693a;
background-color: #ddd;
position:relative;
overflow:visible;
padding: 10px 40px;
margin-top:100px;
}

* {
box-sizing:border-box;
}

#footer .sqs-block-image {
position:absolute;
top:0;
left:100%;
margin-left:-80px;
margin-top:-80px;
}

#footer .sqs-block-image .image-block-wrapper {
padding-bottom:0 !important;
}

#footer .sqs-block-image .intrinsic .image-block-wrapper img {
position:static;
padding:0;
width:auto;
}

#footerBlockRight {
padding-top:30px;
}

#footerBlockRight .sqs-block {
padding-top:0;
padding-bottom:10px;
}

.header-icons #headerSearch, .header-icons #email
{
padding-top:20px;
}

#content > .content-inner-wrapper:first-child {
padding:0
}
.header-hidden #header
{
padding:0;
}
.logo-image.header-hidden #header .logo
{
height:90px;
}

.content-inner-wrapper {
/* padding: 10px !important; */
padding: 0px;
}

@media only screen and (max-width: 1100px)
{
   .content-inner-wrapper {
   padding: 2% !important;
   }
}

blockquote {
padding: 0em 10% 0em !important;
}

/*
#header
{
width:1200px;
}

.outer-wrapper
{
width:1200px;
}
*/

#header h1
{
transition:none;
font-size: 24px;
}

.logo-image.header-hidden #header h1
{
font-size:24px;
}

.header-hidden .main-nav .nav-wrapper
{
margin:0;
}

.logo-image.header-hidden #header .logo-image-title
{
display:none;
}
.header-hidden #header .info-title-email-wrapper
{
margin-bottom:0;
}

.info-title-email-wrapper
{
   padding: 0;
   height:70px;
   margin-bottom: 0px;
}

.sqs-row .sqs-col-4:last-child .sqs-gallery-design-list .sqs-gallery-design-list-slide.no-image .sqs-gallery-meta-container
{
padding-left:70px;
}

.sqs-gallery-design-list .sqs-gallery-design-list-slide:last-child
{
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}

.sqs-gallery-block-slideshow .meta .meta-title {
font-size: 14px !important;
}

.sqs-gallery-block-slideshow .meta .meta-description p {
font-size: 12px !important;
}

/*
.sqs-row .sqs-col-4:last-child .sqs-block-summary-v2 .summary-block-setting-metadata-position-above-title .summary-metadata-container--above-title,
.sqs-row .sqs-col-4:last-child .sqs-block-summary-v2 .summary-block-setting-metadata-position-below-title .summary-metadata-container--below-title,
.sqs-row .sqs-col-4:last-child .sqs-block-summary-v2 .summary-block-setting-metadata-position-below-content .summary-metadata-container--below-content
{
position: absolute;
left: 30px;
display: block;
height: 60px;
width: 60px;
text-align: center;
background-color: #0e693a;
vertical-align: middle;
overflow: hidden;
color:#fff !important;
padding:10px;
}

.sqs-row .sqs-col-4:last-child .sqs-block-summary-v2 .summary-metadata-item
{
font-size:18px;
line-height:20px;
color:#fff;
opacity: 1;
}
.sqs-row .sqs-col-4:last-child .sqs-block-summary-v2 .summary-metadata-item a, .sqs-block-summary-v2 .summary-metadata-item a:link, .sqs-block-summary-v2 .summary-metadata-item a:visited
{
color:#fff;
}
*/

body
{
background-color:#fff;
}
#footer #footerBlockRight,
#footer #footerBlockLeft {
position:relative;
}

@media only screen and (max-width: 1100px)
{
.main-content-wrapper {
padding-top: 0;
}

.menu-top-right {
width: 100% !important;
}

}

@media only screen and (max-width:640px)
{
#mobile-header{
padding: 40px 5% 16px;
}

#footer
{
padding-top:100px;
}

#footer #footerBlockRight .sqs-block {
padding-bottom:10px;
}

#footer .sqs-block-image
{
left: 50%;
top:-110px;
}

#footer #footerBlockRight,
#footer #footerBlockLeft {
width:auto;
display: block;
float: none;
text-align: center;
padding-top:0;
}

.sqs-svg-icon--list.social-icon-alignment-right {
text-align: center;
}

#footer .text-align-right,
#footer .sqs-block-button .sqs-block-button-container--right,
#footer #footerBlockRight h2,
#footer #footerBlockLeft h2
{
text-align:center;
}
}
.sp-back-to-top.visible {
opacity: 0.85;
}
.sp-back-to-top {
opacity: 0;
background-color: #c4b783;
border-color: #c4b783;
border-style: solid;
border-width: 3px;
margin: 0 auto;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 99999;
cursor: pointer;
transition: all ease-in-out 150ms !important;
-webkit-transition: all ease-in-out 150ms !important;
-moz-transition: all ease-in-out 150ms !important;
-ms-transition: all ease-in-out 150ms !important;
}

.sp-back-to-top:hover {
opacity: 1;
}

.sp-back-to-top:active {
opacity:0.8;
}

.sp-back-to-top-arrow-container {
padding: 8px;
}

.sp-back-to-top-arrow {
width: 25px;
height: 25px;
background: url('http://static1.squarespace.com/static/5660870ce4b07de43e2d27fd/t/56d4d5802b8ddea29eb38477/1456788864385/bttarrow.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.sqs-block-content p {
margin-left: 0px !important;
}

.horizontalrule-block {
padding-top: 6px !important;
padding-bottom: 6px !important;
}

.sqs-gallery-block-slideshow.sqs-gallery-block-show-meta .sqs-active-slide .meta {
   background-color: rgba(0, 0, 0, .5);
   pointer-events: none;
   cursor: pointer;
}

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta-inside {
padding: 15px 52px 15px !important;
}

@media only screen and (max-width: 480px)
{
   .sqs-gallery-block-slideshow .meta {
   display: block !important;
   }
}
/* CUSTOM CSS */

.sqs-block-form {
.field-list .title {
font-size: 12px;
color: #046a38;
letter-spacing: 0.5px;
font-weight: 500;
margin-bottom: -3px;
padding-left: 30px;
text-transform: ;
}
.description {
margin-left: 30px !important;
}
.field-element {
font-size: 14px;
color: #666;
font-weight: 300;
}
.field .field-element {
border-radius: 0px !important;
background: none !important;
border: solid 1px #bbb !important;
text-align: left;
transition: all ease-in-out 700ms !important;
}
.field-element:hover {
border: solid 1px #046937 !important;
}
.form-wrapper .field-list .fields .field.three-digits, .form-wrapper .field-list .fields .field.two-digits, .form-wrapper .field-list .fields .field.four-digits {
margin-top: 0px;
}
.form-wrapper .field-list .field select {
border: solid 1px #bbb;
margin-top: 40px;
font-size: 12px;
transition: all ease-in-out 700ms !important;
}
.form-wrapper .field-list .field select:hover {
border: solid 1px #046937;
}
.form-wrapper .field-list .field .option {
display: inline-block !important;
margin-top: 5px !important;
padding: 5px 10px;
margin-right: 10px;
border: solid 1px #bbb;
transition: all ease-in-out 700ms !important;
}
.form-wrapper .field-list .field .option:hover {
border: solid 1px #046937;
}
.form-wrapper .field-list .field.likert .question {
margin-left: 10px;
margin-top: 10px;
margin-bottom: -35px;
font-size: 12px;
font-weight: 700;
}
.form-wrapper .field-list .field.likert .option {
width: 15% !important;}
.sqs-editable-button {
text-transform: !important;
font-weight: 500 !important;
font-size: 14px !important;
padding: 16px 26px !important;
border: none !important;
background: #c8b783;
color: #fff !important;
letter-spacing: 1px !important;
width: 100% !important;
transition: all ease-in-out 700ms !important;
}
.sqs-editable-button:hover {
background: #046937 !important;
}
@media (max-width : 870px) {
.fields .caption {color: rgba(0,0,0,0) !important;}
}
}

tuanphan · March 22, 2021

On 3/19/2021 at 6:16 AM, mwagner said:

Site URL: https://www.st-bede.com/

Help - I'm trying to add a small button that says "Give Now" to our site header to the left of the search icon and links to this page: https://secure.squarespace.com/checkout/donate?donatePageId=57f3ed0a29687fcf1302b611

Our site design is Adrionack and doesn't give me the option to create a button in the header area so it has to be done with code injection but whenever I use this code for a link it goes behind the header.

<!DOCTYPE html>
<html>
<head>
<style>
.button {
float: right;
background-color: green;
border: none;
color: white;
padding: 1px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Source Sans Pro;
font-size: 12px;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
letter-spacing: 3px;
margin-top: 20px;
margin-bottom: 12px;
margin-right: 500px;
margin-left: 12px;
cursor: pointer;
}
</style>
</head>
<body>

<h3><a href="https://secure.squarespace.com/checkout/donate?donatePageId=57f3ed0a29687fcf1302b611" class="button">Give Now</h3></a>

</body>
</html>

Hi. Do you still need help on this? This will require CSS & JavaScript code.

Do you use Business or Commerce Plan?

mwagner · March 25, 2021

Hi - thank you, but no. I added a link to the nav bar and our development team was thrilled with that rather than the button in the header so it all worked out.

Adding button to header using Code Injection

Recommended Posts

mwagner

Link to comment

ingrid.villamagdalen

Link to comment

mwagner

Link to comment

tuanphan

Link to comment

mwagner

Link to comment

Archived

News

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources