My Modal Trigger Doesn’t Work in the Header

Hello,

I’m trying to trigger a modal (based on BasicLightbox) from my website header.

My code works fine if triggered from page content (e.g. a Custom HTML block) but breaks if added to the header. I’m wondering if the issue is caused by any of the JS GeneratePress uses. If so, do you have a recommended work around?

Here is a simplified version of the code:

<a href="#" id="advanced-search">Search</a>
<template id="advanced-search-form">
	<div class="modal">
		<p>Test modal.</p>
	</div>
</template>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basiclightbox/dist/basicLightbox.min.css?ver=6.3.1" media="all">
<script src="https://cdn.jsdelivr.net/npm/basiclightbox/dist/basicLightbox.min.js?ver=6.3.1"></script>
<script>
	document.addEventListener("DOMContentLoaded", function() {
		const instance = basicLightbox.create(
			document.querySelector("template#advanced-search-form")
		);
		document.getElementById("advanced-search").onclick = instance.show;
	});
</script>

Additional Details

I was trying to add the code to the header using the GP docs here:
https://docs.generatepress.com/article/generate_menu_bar_items/

add_action( 'generate_menu_bar_items', function() {
    ?>
        <span class="menu-bar-item">
            <a href="#">Your icon HTML</a>
        </span>
    <?php
} );