Lions adlı üyeden alıntı

#slide-out-open {
top: 55px!important;
}

capscroll adlı üyeden alıntı


@media only screen and (max-width: 900px) and (min-width: 321px) {
#slide-out-open{
margin-top: 20px;
}
}

@media only screen and (max-width: 320px){
#slide-out-open{
display: block;
}
}


Şeklinde değer verilebilir.

320px cihazlarda kutucuk eşit görünüyor, eğer 320px cihazları görmezden gelip 0'dan 900px genişliğe sahip cihazlara kadar margin-top verdirirsek 320px ve alt genişliğe sahip cihazlarda kutucuğun eşitliği bozulacak ve altta görünecek. Bu yüzden her iki çözünürlük için özel ayar vermemiz doğru olur.

Eğer CSS dosyasına erişebiliyorsanız ilk ekran kuralına (900px'lik) display : block; değerini ekleyerek kopyala yapıştır yapın ancak erişemiyorsanız yeni .css dosyası ekleyip bu kodları olduğu gibi yapıştırın. 900px'lik kuralda display : block değeri var fakat biz bu grubu 321px - 900px arasına aldığımız için 320px ve altındaki cihazlarda geçerli olmayacak yani display : block değerini almayacaklar, default durumda da bu kutucuk için display değeri none(görünmez) olduğu için kutucuk görünmeyecek, bu yüzden düzenleme yaptığımız çözünürlük grubuna yani 320px ve altındaki cihazlara bu değeri özel olarak vermeliyiz/telafi etmeliyiz.

Gglog adlı üyeden alıntı

hocam chrome dev tools'tan 175x44 yaptım güzel görünüyor ama beğenmediğiniz kısım menü butonu ile hizalı görünmemesi sanırım. Onun sebebi İ harfinin diğer harflerden uzun olması bundan dolayı en uzun genişliğe göre ortalıyor logoyu düzenlerseniz bence düzelir kodları bozmaya pek gerek yok.