Docs

[markwest]

Hi,

I will post login details of the site below in a private post.

To explain, I have a section, on row, two columns, marginless, without container. So each column is 50% of the row width with no padding/margin.

I’m adding Javascript as per https://community.theme.co/forums/topic/how-to-make-an-entire-column-a-hyperlink/

So, on my site it looks like this –
jQuery(“#meet-the-team”).wrap(““);
jQuery(“#our-values”).wrap(““);

But after doing so the columns get squashed to around 25% each and moved over to the left.

I have tried adding width: 50% as styling to each column but this didn’t fix it?

Ideally I’d like a site wide method (global CSS/JS rather than on-page) to ensure that columns retain their correct width/position as this method of linking will be used on many of the sites pages.

Hope you can help.

Thanks very much

Mark

[markwest]

This reply has been marked as private.

[markwest]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in and the very detailed post information. The solution that you have recreated from the previous thread is way difficult. I have found an alternative way of doing it with just a few simple steps. To make an entire column to become a link, please do the follow these:
1] Please set up your section, row and columns.
2] Be sure to insert a custom ID for each of your column. I can see that you already have this. You were using #meet-the-team,
#our-values as column IDs.
3] Go to the settings tab, Settings > Custom JS and insert the following custom js code

(function($){
 $(document).ready(function($) {
  $("#meet-the-team").append("<a href='/meet-the-team/'></a>"); 
  $("#our-values").append("<a href='/our-values/'></a>"); 
 });
})(jQuery);

4] And then insert the following custom css in the settings tab, Settings > Custom CSS

#meet-the-team,
#our-values{
    position: relative;
}

#meet-the-team > a,
#our-values > a{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

5] Saved all these changes and preview the page.

I have created a test page in your site. Please do check it.

[markwest]

Hi Rue,

Thank you again.

That works brilliantly.

Best Regards

Mark

[Jade]

You’re most welcome Mark.

[rinzin]

Hello,

I have tried the exact code on mysite and it doesn’t seem to be working.

I have tried changing the id in each column from #idname to idname and no difference is seen.

Any advice?

[rinzin]

This reply has been marked as private.

[Christopher]

Hi there,

I see following link which works : http://kadampanewyork.org/newsite/retreats#learning-zone
but I think you didn’t link it to the correct section, note that you should target section’s ID.
Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[Author]

Posts