yazdığınızın aynısını yapmaya çalıştım olmadı ama nav ın içine sadece input ekledim. animasyon özelliğini siz dive vermişsiniz ama ben input:focus a verdim. istediğim gibi bir şey ortaya çıktı ama input dışında bir yere tıklanıldığında direk animasyonsuz eski pozisyonuna geri dönüyor. input dışında bir yere tıkladığımızda arama kutusu açılmadan önceki haline aynı animasyonla geri döndürmemizin bir yolu var mıdır ? yoksa artık uğraşmayı bırakacam :)

https://codepen.io/last_hope/pen/rpdBNj buradaki gibi oluyor.