Hi,
Is it possible to have the icon “pulse” like it does when you have a link set but with no link. Pulse on hover but do nothing on click?
Here is an example here – Scroll down to where you see 4 images with icons in the middle (pencil, camera, video, microphone). The pencil icon does not have a link and when you hover on it there is no pulse. The other 3 have a link of “#” which creates a pulse but unfortunately the link takes the viewer to the top of the page.
How can I NOT have a link but keep the pulse on hover?
Thanks,
Slade
Hi Slade!
Thank you for using Enfold.
Please add this css code to disable the link.
.av_font_icon.feature-icon {
pointer-events: none;
}
You can use that selector or turn on the custom css class field so that you can apply a unique class attribute to the icons.
// http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Regards,
Ismael
Thanks Ismael,
After placing that bit of code it seemed to have turned everything off. There is no pulsating ring or tooltip on hover. Ideally both of those would remain but if clicked it wouldn’t link to anything. Does that make sense?
Thanks!
Slade
Hi,
Thank you for the update. Please remove the css code then add this in the functions.php file:
function ava_custom_script() {
?>
<script type="text/javascript">
(function($) {
function a() {
$('#top .av_font_icon.feature-icon').click(function(e) {
e.preventDefault();
});
}
a();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script');
If you want to remove the pointer, add this in the Quick CSS field.
#top .av_font_icon.feature-icon {
cursor: default;
}
Best regards,
Ismael
This is exactly what I needed! Thanks Ismael!!