Jump to content

Archived

This topic is now archived and is closed to further replies.

sonaros

Inside Bottom Branding Hook Link

Recommended Posts

sonaros

I have created a hook so that I could add a donate button within the header of my site.   I added the following code:

 

<div class="actionlogo-img"><a href="http://www.cid.edu/support-cid/"><img src="http://www.cid.edu/wp-content/uploads/2013/12/Donate-Button.png" alt="Support CID" /></a></div>

 

The button shows up but when I hover over the button or click on it, it won't go to my support page.  It only goes to my homepage which is the link for the header.  How do I get the button to show the link in the code and the rest of the header to go to the homepage?

 

Thanks.

 

 

Website URL: www.cid.edu
Framework Version: 2.4.5
WordPress Version: 3.9.2
Server/Host: Hostgator
 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

The problem you have is you're using a full width image in your branding area, which is usually supposed to be used for a logo image. So what you're going to need to do is either alter your image dimensions slightly so that it isn't as wide and then reduce the width from 100% to a specific width so that the container is full width.

 

If you reduce the width as it stands now, it is going to effect the size of your image which I assume isn't something you want to happen.

 

You could try adding a z-index to both your hooks CSS and the Branding div and see if that works. Remember to change the position: inherit; to relative on your hooks css otherwise the z-index won't work.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
sonaros

I am not having any luck.  I reduced the size of the logo to 726px from 960 and reduced the width.  No luck.  Question:  how do the social icons work when the container is full width and not the hook/button?

 

Thanks.

Share this post


Link to post
Share on other sites
Danny

OK, the actual issue is your CSS you have added, you actually do need any of it. Also, you should not use negative margins to position elements. If you remove all the CSS you have for that button and replace it with this:

 

.section-branding .actionlogo-img {
position: absolute;
right: 25px;
top: 40px;
}
 
It should get you started in the right place, additional styling may be required, such when viewing your site on mobile devices so you will need to use media queries. Please be aware that our CSS support is limited and we do not provide support to users who have added custom code themselves, which is what you're doing.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×