Disable Links

If it shouldn’t be a link, it’s best to change it where it is generated. But if that’s too hard, you can use CSS pointer-events: none on those links. Be sure to make the selector specific enough to get only the links you want to affect.
Edit: Be aware that the CSS does not affect keyboard navigation. The link will still be in the tab sequence and your can navigate to it by hitting Enter.

Ok, make sense but raises another question, how to find out the specific selectors described.

Most browsers have a Developer Tool built in. It allows you to interactively see the HTML and CSS for your page, and add CSS to test things. Open your page, select Developer Tool from menu (or right click on the link and choose Inspect Element). Examine the classes that are used on the body or just the section that you want to affect. Try different selectors for that rule to make sure it’s not too general (getting all the links on the page) or too specific (getting only one link). Make sure it applies to just this page (usually using body classes), if that is what you want.

Learn to use the Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS.

• This reply was modified 4 years, 4 months ago by Joy. Reason: add links to resources

So I have tried to add,
.elementor-column-wrap elementor-element-populated {
pointer-events: none;
}

to the CSS, however no affect. Any ideas?
Thank u very much for walking this through with me.

I’m using Firefox. When I opened your page before, the links were working. Now they are not. I don’t know what you changed, but you have the effect you wanted. However, the rule that you added did not do it.
The Dev Tools now does not let me drill down to the link element. I don’t know if that is because the Dev Tool is affected by the pointer-events:none that is in effect. But it does show me that the rule has to do with .trx_addons_column-1_4 having pointer-events:none from an inline rule. I didn’t find the rule itself, though the name is in some CSS from your theme. Your page seems to have two copies of the same CSS loaded inline. Part of that is for Google fonts and part is Google Maps.
If that rule were not in effect, your rule would need to be something like
.page-id-2983 .sc_dishes .sc_dishes_item_title a {pointer-events: none;}
The first class is a body class, for this page only since it has the page ID in it. The second class is the part that defines the container for the list of dishes, the third class is the individual item title and the fourth part is the a element that means it’s a link.

So it is quite mind-blowing and I have no clue how it works but it works at the moment so I won’t touch anything ?? I was trying several options.
Taking the class as you have recommended of the wrap the columns are sitting in

elementor-element elementor-element-128f21d elementor-widget elementor-widget-spacer {pointer-events: none;}

Which is the element I wanted to change, but it didn’t work,

then I have tried,

elementor-widget-wrap {pointer-events: none;}

which did work, however, disabled all the links on the page, so not good.

And so I wanted to test if I can disable a particular column. so I have added

.trx_addons_column-1_4 {pointer-events: none;}

to my surprise, all the dishes links got disabled.
So no idea how but it works ?? so I will just leave it for now…

And yes there are 2 CSS copies, the one from the server I have inserted to the Customise CSS field, only because for some reason every time I have amended the server CSS and make changes in WordPress all the CSS changes were gone.
Not sure why, but this way it got sorted.

Anyway, Joy, thank u soo much for helping and I will be in touch should there be anything else I’m struggling with.

Thank u