Bootstrap kullandığınız için ufak sıkıntıları var. Arama kutusu ve menü öğelerini ayrı ayrı nav içine alırsanız belki olabilir. Bu şekilde Bootstrap değerlerini alarak hareket ediyor. Arama kutusu formunu nav içinden çıkartırsanız logoyu da çıkartmak zorunda kalacaksınız, bu da başka bir sorun tabi. Eğer logo, arama kutusu ve menüyü 3 ayrı parçaya bölüp kullanmak isterseniz, bu sefer de mobil cihazlarda arama formunun kaybolması için display none olarak ayarlamanız gerekecek.

Arama ikonuna tıklandığında formun görünmesi için de böyle bir javascript kodu kullanmalısınız:
Bu javascript kodu çalıştırıldığında id="searchImdb" olan formu bulup içine style="display: block;" ekler. Sizin formda id="searchImdb" yok bu arada, eklemeniz gerekecek.

function openSearchImdb() {
    var loginModal = document.getElementById('searchImdb');
    loginModal.style.display = 'block';
}
function closeSearchImdb() {
    var loginModal = document.getElementById('searchImdb');
    loginModal.style.display = 'none';
}

Mobil cihazlarda display none olduğu için görünmeyen formu tekrar display block yapmak için de onclick="openSearchImdb()" kullanmanız gerekiyor html örneğindeki gibi. Yani html kodundaki spana basıldığında javascript kodu devreye girmiş oluyor. Kapatmak için de bu kodu X butonuna eklemeniz gerekiyor onclick="closeSearchImdb() "

<span class="searchbtn"  onclick="openSearchImdb()">
 <svg xmlns="http://www.w3.org/2000/svg" class="svgh fll br1" viewBox="0 0 16 16">
           <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"></path>
    </svg>
</span>

Bootstraptan pek anlamadığım için bootstrap dışında bir çözüm anlattım. Bootstrap ile de yapılabilir mutlaka, modal örnekleri var sonuçta.