Modal won't appear on click but will disappear on click just fine

Question

Here is the page in question: https://www.alchemycreative.studio/test-layout-3/

The little hamburger icon points to "#openModal" but it does not work unless you open it in a new tab. It will disappear fine, however, when you click the X, which points to "#".

They both use the same technique. Can anyone tell me why it's not working for the hamburger? The modal is also doing a weird thing where it comes and goes briefly after page load.

The instructions I followed are here, complete with a demo: https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

Below is my CSS, which takes out all the extra styling:

.modalDialog {
    position: fixed;
    z-index: 999;
    opacity:0;
    -webkit-transition: opacity 800ms ease-in-out;
    -moz-transition: opacity 800ms ease-in-out;
    transition: opacity 800ms ease-in-out;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}