JQueryは特定の幅でのみ動作しています

Question

私は検索バーオーバーレイを作成しています。完了し、Exampleのように動作します。しかし、JSは、WordPressにログインしている場合、または私のウィンドウが>588pxの場合、うまく動作します。

ウェブサイトはTarson Poolsです。検索アイコンをクリックしてください。以下は

（正常に動作します）私のjQueryのコードです：

//Created by Ryan Tarson, Please do not copy be original 
jQuery(document).ready(function($) { 
    var wHeight = window.innerHeight; 
    console.log(wHeight); 
    //search bar middle alignment 
    $('#mk-fullscreen-searchform').css('top', wHeight/2); 
    //reform search bar 
    jQuery(window).resize(function() { 
    wHeight = window.innerHeight; 
    $('#mk-fullscreen-searchform').css('top', wHeight/2); 
    }); 
    // Search 
    $('#search-button').click(function() { 
    console.log("Open Search, Search Centered"); 
    $("div.mk-fullscreen-search-overlay").addClass("mk-fullscreen-search-overlay-show"); 
    }); 
    $("a.mk-fullscreen-close").click(function() { 
    console.log("Closed Search"); 
    $("div.mk-fullscreen-search-overlay").removeClass("mk-fullscreen-search-overlay-show"); 
    }); 
}); 

Answer 1

問題は検索アイコンにしたクラス割り当てました。 class: col-mw-3行を削除した後、すべてのブラウザで問題なく動作しました。 また、<a>のタグには何も含まれていないことを確認してください。