[flacnvinylParticipant]

That worked! Thanks!

[JoaoModerator]

Glad to hear it,

Let us know if we can help with anything else.

Joao

[mattihanskiParticipant]

Hello,

I set up a column link and somehow managed to get it to work. However I also tried to get the hover effect and it doesent seem to work.
I added this custom js:

(function($){
  // column 1
  $('<a href="https://www.facebook.com/Bytatsianacom-181832025560451/?__mref=message">').insertBefore('#linked-column-1');
  $('#linked-column-1').prependTo( $('#link1') );
  
  // column 2
  $('<a href="#process">').insertBefore('#linked-column-2');
  $('#linked-column-2').prependTo( $('#link2') );

  //.... and more...
})(jQuery);

and this to custom css also in cornerstone:

.linked-column:hover:before {
    background-color: rgba(255,255,255,0.5);
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}
.linked-column:hover a {
    color: red !important;
}

The link works but the hover does not.

Any ideas?

[RadModerator]

Hi there,

I see that you use IDs on your javascript but your CSS uses class name, how about this

(function($){
  // column 1
  $('<a href="https://www.facebook.com/Bytatsianacom-181832025560451/?__mref=message">').addClass('linked-column').insertBefore('#linked-column-1');
  $('#linked-column-1').prependTo( $('#link1') );
  
  // column 2
  $('<a href="#process">').addClass('linked-column').insertBefore('#linked-column-2');
  $('#linked-column-2').prependTo( $('#link2') );

  //.... and more...
})(jQuery);

Thanks!

[anwwebParticipant]

Using the below from an earlier page:

(function($){
  // column 1
  $('<a id="link1" href="http://andcom.solutions/websites/">').insertBefore('#linked-column-1');
  $('#linked-column-1').prependTo( $('#link1') );
  
  // column 2
  $('<a id="link2" href="http://andcom.solutions/mobile/">').insertBefore('#linked-column-2');
  $('#linked-column-2').prependTo( $('#link2') );
  
    $('<a id="link3" href="http://andcom.solutions/SEO/">').insertBefore('#linked-column-3');
  $('#linked-column-3').prependTo( $('#link3') );
  
  // column 2
  $('<a id="link4" href="http://andcom.solutions/IT-services/">').insertBefore('#linked-column-4');
  $('#linked-column-4').prependTo( $('#link4') );

  
})(jQuery);

The above has got my columns linking, but the margin / spacing has now disappeared. I have disabled marginless columns in the row section.

URL: http://andcom.solutions

Thx

[LelyModerator]

Hi There,

Please also add this custom CSS:

#linked-column-1, #linked-column-2, #linked-column-3 {
    margin-right: 4%;
}

The change in structure produce conflict on existing margins. Redefining it will fixed it.

Hope this helps.

[anwwebParticipant]

Thank you 🙂 That seems to have fixed it.

[Rue NelModerator]

No Problem!
As always you are most welcome.

[anwwebParticipant]

Hi,

Sorry to return to this, but I have rebuilt my site and am having problems. Again the script is over writing my css and my block grids are showing streched full screen, they should be 2 side by side blocks. Adding margin-right is not the fix time. 🙁

http://anwweb.com/test/#t1

TIA

[Rue NelModerator]

Hello There,

This solution has been deprecated.

There is a much easier way of doing it. Please check out this topics: https://community.theme.co/forums/topic/3-column-with-3-links/#post-1244755, https://community.theme.co/forums/topic/making-entire-column-a-link-alters-layout-of-columns/#post-1255988

Hope this helps. Please let us know how it goes.

[Author]

Posts