Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

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>
    <link rel="stylesheet" href="" media="all">
    <script src=""></script>
    	document.addEventListener("DOMContentLoaded", function() {
    		const instance = basicLightbox.create(
    		document.getElementById("advanced-search").onclick =;

    Additional Details

    I was trying to add the code to the header using the GP docs here:

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

    At first glance, your code doesn’t seem to have any conflict with ours.

    What I can think of to easily resolve this is to use the Search Modal of GP to create your custom Header Modal.

    If you’re open to this, there’s a Block Element – Search Modal feature that would allow you to fully alter the output of this modal. With this, you can add anything of your liking.

  • I actually tried the Search modal first. We had a few issues with default behavior that made it not a good options.

    The big ones are the search modal automatically focuses the 1st field (which triggers a date select pop-up that covers most of the form) and the search modal content isn’t scrollable (our form can get pretty tall on some screens).

  • Hi there,

    can we see the issue on your site ? Might be able to diagnose what the issue with that script is.

  • Sure David. I’ve added a staging site URL to my Private Information box. Look for the “Test Modal Trigger” link in the header.

  • I see. For testing purposes, can you also add another “Test Modal Trigger” in the content so we can observe how it works as well live on the site?

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.