How do add a link to Logo?

[YEGSchools]

Hi. I am looking to place a donate now button in the Logo area so when you click on the logo it will take you to our donation page. Can anyone offer help with this? I probably need to use custom code? 

Another thing I can do is put the donate now button image in the navigation but I think that is even harder. 

Please help. 

[DXC]

@YEGSchools,

Can you post a link to your website? Thanks!

[YEGSchools]

Hi DHC http://www.ecsfoundation.ca/

[DXC · Accepted solution]

@YEGSchools,

Okay, I came up with 2 solutions for you. Neither will require you to do anything too extensive in the HTML, however, both will require you to add a bit of code to your CSS.

You'll need to add the following code to your "header.html" inside the object with "id=sitename"

<div id="sitename">
   <a href="http://weblink.donorperfect.com/dreamsforkids" title="Donate now!" target="_blank" class="donate-link"></a>
   {logo}
</div>

Solution #1 — This solution reuses the preexisting logo and places a hyperlinked box over the part of the logo containing the donation graphic. The problem with this solution is that on mobile the button will be too small to use. In my code I disabled the overlay from working at mobile widths, however, the logo on your website will still be showing the donation graphic.

See solution #1 on CodePen

CSS required:

#sitename {
	position: relative;
}

.donate-link {
	border-radius: 25px;
	width: 115px;
	height: 115px;
	display: inline-block;
	position: absolute;
	margin-left: 650px;
	margin-top: 40px;
}

@media (max-width: 992px) {
.donate-link {
	display: none;
}
}

Solution #2 — With this solution you'll need to change your logo to one that does not already include the donation graphic. The graphic is then added in as a separate object, and at mobile widths is completely removed from the header. This also allows you to get fancy and add in a subtle emphasizing animation, which should result in more clicks.

See solution #2 on CodePen

CSS required:

#sitename {
	position: relative;
}

.donate-link {
	background: transparent url(http://www.ecsfoundation.ca/uploads/5/2/2/7/52275531/4044705.jpg) 50% 50%/contain no-repeat;
	width: 115px;
	height: 115px;
	display: inline-block;
	position: absolute;
	margin-left: 520px;
	margin-top: 40px;
	
	animation: 1s cubic-bezier(0.5,0.5,0.25,1.5) 0s 1 attnGrab;
	-webkit-animation: 1s cubic-bezier(0.5,0.5,0.25,1.5) 0s 1 attnGrab;
}

@media (max-width: 992px) {
.donate-link {
	display: none;
}
}

@keyframes attnGrab {
  0% {
    transform: scale(0.5)rotate(35deg);
		opacity: 0;
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes attnGrab {
  0% {
    -webkit-transform: scale(0.5)rotate(35deg);
		opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
  }
}

All of this CSS can just be pasted into your "main.less" under the "Styles" section. Let me know how this goes for you!

[YEGSchools]

WOW! @DXC this worked like a charm! 

Thank you for this, it looks amazing. I am just not sure what effects you were talking about. But it's exactly what I wanted. I used Solution #2. 

[DXC]

@YEGSchools,

It looks like the animation code didn't copy over correctly.

Make sure it looks like this:

@keyframes attnGrab {
  0% {
    transform: scale(0.5)rotate(35deg);
    opacity: 0;
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes attnGrab {
  0% {
    -webkit-transform: scale(0.5)rotate(35deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
  }
}

[YEGSchools]

[YEGSchools]

@DXC it looks like this when i have it pasted into weebly. 

[DXC]

@YEGSchools,

I feel silly now, because I've found my typo. Woops!

@keyframes attnGrab {
  0% {
    transform: scale(0.5)rotate(35deg);
    opacity: 0;
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes attnGrab {
  0% {
    -webkit-transform: scale(0.5)rotate(35deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
  }
}

[YEGSchools]

@DXC i'm probably doing something wrong. It's okay it looks great even without animation. I don't know what we'd do without your help. 

[jonsuey]

I am also trying to do this.  I followed the directions for the second solution above...but can't get the image to show.

My website is:  paysonseniorcenter.weebly.com

I was hoping to add a "donate now" button (and link) to the top of every page to the right of the logo.

Thanks for any help.