js çalışması için
http://code.jquery.com/jquery-1.10.1.min.js adresindeki kodları bahsettiğin tarzdaki bir siteden sıkıştırıp site dosyalarına dahil ettim site analizi yaptığımda sayfa boyunda js boyutu 90kb gösteriyo du zaten normal boyutu o. Birşey farketmedi yani bende anlamadım baktım olmuyo olmaz olsun javascriptiniz dedim
Benim asıl olayım o değilde şu #media olayını hiç bilmiyorum taşmaması için o verdiğiniz kodu mu kullanmam gerekiyo
hocam o javascript değil jquery, jquery'i bir sayfaya dahil edin ardından gtmetrix.com da sayfanızı taratın, size jquery'nin optimize edilmiş halini verecektir
</body> tagından önce js dosyalarını eklerseniz iyi olacaktır.
Şimdi siz menüye belli bir genişlik vermişsiniz, o genişlik düşünce ister istemez <li></li>
etiketleri de bozuluyor.
@media (max-width: 1024px) {
nav ul {
text-align: center;
}
nav ul li {
display: block;
}
}yukarıda ki kodları ekleyince sitenizde 1024px'den sonra menü yatay değil dikey olacaktır, ayrıca ortalanacaktır
çalışma mantığını anlarsanız biraz kurcalayın

öğrenmenin en iyi yolu budur @mediaa responsive'in olmazsa olmazıdır