Search bar is (on header area) is not responsive.

Can you purge/empty your Litespeed Caching plugin? Or maybe just deactivate it for now? I assume that's why the same is looking the way it is when you make changes (like deactivating a plugin).

Litespeed cache (LSCWP OR LSC) plugin already deactivated

Litespeed cache (LSCWP OR LSC) plugin already deactivated

After doing this, make sure you keep it deactivated and then deactivate the other plugins.

It's possible that your plugins scripts like the ones from ThirstyAffiliate or other scripts are causing this.

I would like to fix the site first, later I'll fix #

LSC plugin minified css and js, maybe this is creating the issue.

Hello,

The plugin "codesnipt" is causing the search bar problem.

The # is coming in url when I click search bar due to codesnipt plugin.

I don't understand what caused the problem and cannot fix it.

I'll talk about LSCWP later.

The # is coming in url when I click search bar due to codesnipt plugin.

You should ask the origin of that code snippet on how to fix the issue. :)

Now that you found it, you can temporarily disable it and enable your plugins(including caching) and it should work properly.

Note: Make sure you purge cache every time you do changes so the cached version is always the most recent setting you've applied from the backend.

Is this code alright?

add_action( 'wp_head', function () { ?>
<style>

	@media (min-width: 769px) {
    .navigation-search.nav-search-active {
       max-width: 560px;
        left: auto;
    }
}

</style>
<?php } );

Please answer the above query first.

And, I found the code causing this issue.

I am using a code to fix Passive touch and wheel event listeners (code found in GP forum)

add_action( 'wp_footer', function () { ?>
<script>
(function() {
  var supportsPassive = eventListenerOptionsSupported();  

  if (supportsPassive) {
    var addEvent = EventTarget.prototype.addEventListener;
    overwriteAddEvent(addEvent);
  }

  function overwriteAddEvent(superMethod) {
    var defaultOptions = {
      passive: true,
      capture: false
    };

    EventTarget.prototype.addEventListener = function(type, listener, options) {
      var usesListenerOptions = typeof options === 'object';
      var useCapture = usesListenerOptions ? options.capture : options;

      options = usesListenerOptions ? options : {};
      options.passive = options.passive !== undefined ? options.passive : defaultOptions.passive;
      options.capture = useCapture !== undefined ? useCapture : defaultOptions.capture;

      superMethod.call(this, type, listener, options);
    };
  }

  function eventListenerOptionsSupported() {
    var supported = false;
    try {
      var opts = Object.defineProperty({}, 'passive', {
        get: function() {
          supported = true;
        }
      });
      window.addEventListener("test", null, opts);
    } catch (e) {}

    return supported;
  }
})();
</script>
<?php } );

This is causing the search bar issue (the # is coming due to this) please resolve this.

Hi there,

there is nothing we can do to fix the Passive Listeners issue. It is a core WP problem that was raised here on WP Trac almost 2 years ago:

https://core.trac.wordpress.org/ticket/47510

As you can see from the very last reply WP won't fix the issue.

That custom code ( originating from a stackexchange user ) it is known to fix the passive listener issue related to the WP Comments form. However it also effects other elements - for some site builds it works for others it does not. And there is nothing we can do to change that.

I suggest you remove the code.

I had shared other code, is that written correctly? Just for confirmation. Please clear.

This code:
https://generatepress.com/forums/topic/search-bar-is-on-header-area-is-not-responsive/page/2/#post-1696742

Is correct - however you don't need to use a Hook to add CSS - you can simply add the CSS to customizer > Additional CSS:

@media (min-width: 769px) {
  .navigation-search.nav-search-active {
    max-width: 560px;
    left: auto;
  }
}

Thanks for the confirmation,
Actually, I am using many css codes for customizing purpose. I use code snippets because I feel I should not play with Additional css, I may break it.

You're welcome