“Opacity: 0” with custom styling makes other content non-clickable
-
Closing the cookie bar by clicking ‘X’ will javascript-add a
display: none;to the element, effectively hiding it.
Thus, after reloading the page, because cookies have been accepted, the cookie bar should be hidden by default. It is, but it is now hidden through the use ofopacity: 0, which only makes the bar non-visible. If the bar happens to overlay any links on the page, the non-visible bar will prevent you from clicking those links.With the default styling, the bar happens to be completely out of the way, never overlaying any other element. However, with custom styling, this easily becomes a problem.
I suggest changing
opacity: 0todisplay: hiddenas the default hiding method.
-
Hmm, I see. That would indeed hide the bar.
Upon further inspection, the culprit seems to be the padding that I added after dequeueing the default stylesheet in the plugin settings.
I’ve set mine topadding: 15px 20px, just like the original. However, the orginal stylesheet resets topadding: 0 20pxwhen the bar should be hidden, while the custom styling does not…May I ask if there’s any reason against using
display: none? Eager to learn, that’s all.
- The topic ‘“Opacity: 0” with custom styling makes other content non-clickable’ is closed to new replies.
