Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training
Send up to 1,000,000 emails/year. Mautic Support in Spanish 24 hours, 365 days
On some occasion, the need may arise that we require to deactivate the links or actions that could execute a click in a specific section.
An example can be a special element that we want to continue to be visible but we need to disable the link that it may have. This time we are going to validate in a very simple way how we can achieve this purpose using a simple line of CSS styles.
Determining the class of the element to disable
In most cases we do not have the possibility of establishing a specific class to the section or element that we want to apply the styles to, which is why the elements inspector of our browser is an extremely useful tool that will help us identify and take the class that best suits our purpose.
For example, we have the following case, the corresponding section is an accordion with content which works by displaying information when clicking on each of the titles.
We want to disable clicking in this section and only in it, for this we are going to inspect the element by doing Right Click-> Inspect
Once the inspector window is open, we will be able to determine which class is assigned the section to which we want to apply CSS styles
We can see that the class assigned in the accordion section is called “elementor-toggle” and with this to our knowledge we can continue to apply the CSS styles
Applying CSS styles
From the section of Appearance->Customize->Additional CSS We are going to include the following CSS styles
.elementor-toggle { pointer-events: none; }
Considering that “elementor-toggle” is the class we just took to apply the styles and “pointer-events: none;” it’s the property that does all the magic.
By saving changes we will be able to validate that in effect when clicking on the accordion section, its elements remain without moving.
conclusions
Although the use of CSS styling is simple but really effective, we must take into account some considerations regarding how to apply what we have just tested in the example.
- It is indisputable to know which specific element, section or section we want to apply the styles, since the classes have the peculiarity that they can be repeated and applied to several elements, if we take a class that is repeated elsewhere on the web, then these elements also they will be disabled
- The principle also works for the IDs of a specific section
- It is also totally valid if we have control of the site to be able to create a class and apply it to the element that we want to be disabled
If you want to polish your knowledge on how to use CSS superpowers you can take a look at the free course that we have available.
Help us improve our content by sharing your opinion
WordPress and Woocommerce support team at .
Facebook Comments
Disqus