Navigation Search Modal Issues

Again, this is in reference to the search navigation modal missing its exit/close sign

It does not need a close icon; you can click anywhere outside the search box to close the modal.
Here’s a screen record for your reference: https://app.screencast.com/FgQUSIXocaeqR

I have never seen complains for not finding the close icon for the search modal, so I think most people can figure it out.

And I really don’t think you need a close button, as you can see the one you are testing right now, does not have a close button as well, it’s just not standard for search forms. You can try WP’s search block as well, it doe snot have a close button either.

Question: Was the modal created with an exit sign or anything or not?

No, there isn’t a default exit sign or anything like that. As I said, you can click anywhere to exit; you do NOT need to click on a close icon to exit.

To add a button to act as a close button, you will need to write custom JS. Is it the path you want to go forward with?

If so, you can go to appearance > elements, create a new block element – search modal, and paste the blocks in. Screenshot for your reference: https://app.screencast.com/WYcjove3ixguQ

<!-- wp:html -->
<form role="search" method="get" class="search-modal-form" action="https://clean.local/">
		<label for="search-modal-input" class="screen-reader-text">Search for:</label>
		<div class="search-modal-fields">
			<input id="search-modal-input" type="search" class="search-field" placeholder="Search …" value="" name="s">
			<button aria-label="Search"><span class="gp-icon icon-search"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path></svg></span></button>
		</div>
			</form>
<!-- /wp:html -->

<!-- wp:generateblocks/text {"uniqueId":"17b505fc","tagName":"button","styles":{"display":"inline-flex","borderRadius":"10px","alignItems":"center","backgroundColor":"#ff5722","color":"#ffffff","paddingTop":"1rem","paddingRight":"2rem","paddingBottom":"1rem","paddingLeft":"2rem","textDecoration":"none","\u0026:is(:hover, :focus)":{"backgroundColor":"#e64a19","color":"#ffffff"},"columnGap":"0.5em",".gb-shape svg":{"width":"1em","height":"1em","fill":"currentColor"},"position":"absolute","top":"-10vh","right":"5px"},"css":".gb-text-17b505fc{align-items:center;background-color:#ff5722;border-radius:10px;color:#ffffff;column-gap:0.5em;display:inline-flex;position:absolute;right:5px;text-decoration:none;top:-10vh;padding:1rem 2rem}.gb-text-17b505fc:is(:hover,:focus){background-color:#e64a19;color:#ffffff}.gb-text-17b505fc .gb-shape svg{width:1em;height:1em;fill:currentColor}","htmlAttributes":{"aria-label":"close search form"},"iconOnly":true,"className":"close-search"} -->
<button class="gb-text-17b505fc close-search" aria-label="close search form"><span class="gb-shape"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 13" height="13" width="13"><rect fill="currentColor" transform="rotate(-45 0 11.4497)" rx="1" height="2" width="16" y="11.4497"></rect><rect fill="currentColor" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 13 11.4497)" rx="1" height="2" width="16"></rect></svg></span></button>
<!-- /wp:generateblocks/text -->

Once it’s done, add this JS to a hook element, set the location to the entire site, and hook name to wp_footer.

<script>
document.addEventListener('DOMContentLoaded', function () {

    const closeButton = document.querySelector('.close-search');
    const overlay     = document.querySelector('#gp-search .gp-modal__overlay');

    if (!closeButton || !overlay) {
        console.warn('Close button or overlay not found');
        return;
    }

    closeButton.addEventListener('click', function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();

        // Simulate a real click on the overlay → this is what GP uses to close the modal
        const clickEvent = new MouseEvent('click', {
            bubbles: true,
            cancelable: true,
            view: window
        });

        overlay.dispatchEvent(clickEvent);
    });
});
</script>

But, can I remove the little blue x inside the search box?

No, that’s to clear the search term.

And possibly change the shape and color of the box?

Yes, custom CSS is required. What changes do you want to make?

In addition, can I choose where on the screen to add this exit button?

Yes, but limited, so not everywhere. Where do you want to position it?