Link Inception - Column Link

Beta
#1

Hey guys,

Not sure if this is a bug or just something that it’s prohibited in the HTML world.

So I have a column that I want it to have the main link using the <a> tag but also inside this same column I need to have another 2 links going to different URLs.

Here is a screenshot of how the columns look on the builder preview.

Screenshot 2021-02-25 at 08.25.55
Screenshot 2021-02-25 at 08.25.552192×278 31.8 KB

Here it’s how it looks live:

First Column:
Column <a>
Second Link <button>
Third Link <button>

Second Column:
Column <a>
Second Link = h1 <a>
Third Link = h1 <a>

Third Column:
Column <a>
Second Link <div><a>
Thrid Link <div><a>

Now you can see that both the first and second columns look fine but the problem is it’s only adding the <a> tag to the column and ignoring the rest of <a> tags inside the column (second & third link).

And the third column doesn’t look anything like the preview.

Any ideas on what could be happening here, or am I doing something wrong?

Cheers

#2

Nesting Anchor tags is invalid. I have actually checked some other popular Builders and they don’t care. This is one of the reasons Pro is so great. :slight_smile:

I solve such situation by not setting the Anchor on the parent, but placing 100% wide and high DIVs into it that link to different places, and holding other elements at the same time. So the parent looks like being clickable on its entire area.

2 Likes
#3

Ahh, that’s how to do proper link inception! Thank @Misho

1 Like
#4

@Maratopia_Digital, I think you might have actually stumbled across the same bug reported here: 4.1.5 | clickable div + nested button

You should be able to make a Column clickable and still use elements inside it that have anchors - just know those anchors will get remove out. Sometimes, like in your case, this is helpful to provide a larger interaction area but still use button styles.

Because (as @Misho pointed out) nested anchors is invalid, we have some detection in place that should change the output of anchor tags to prevent nesting, but it definitely shouldn’t be reordering the DOM like that.

Seeing your example has given me a bit more context about the issue and hopefully we’ll have this fixed soon.