Reply To: Mobile searchbar focus / shifting issue

[Ernest Marcinko]

I see. Well, the lightbox seems to reset each time the menu/icon is clicked, so you could add a script whenever the search icon is clicked, which adds a unique class name to the lightbox:

(function($){
	$('.header-search-lightbox').on('click', function(){
		setTimeout(function(){
			$('.mfp-wrap').addClass('has_search');
		}, 200);
	});
})(jQuery);

..then use a modified custom CSS:

.mfp-wrap.has_search,
.has_search div#search-lightbox,
.has_search .searchform-wrapper,
.has_search .mfp-container .mfp-content {
    position: static !important;
}

div#ajaxsearchpro1_2 {
    position: static !important;
    top: 0px;
}

.has_search .mfp-container div.mfp-content {
    position: relative !important;
    top: 0 !important;
    height: 100%;
    padding-top: 120px !important;
}

It will target only when the container has that specific unique class name.