Tutorial Mengubah Tampilan Menu Navigasi Mobile

Source: Feshto.blogspot.com

Sedikit perubahan tampilan bagi Anda yang mungkin kurang menyukai menu navigasi mobile saat ini, perubahan ini tidak akan terlihat pada tampilan desktop.

Jika Anda membuka artikel ini melalui smartphone maka akan terlihat menu navigasi berbeda dengan halaman lain. Untuk menerapkan perubahan ini hanya sedikit menambahkan kode CSS pada template, Silahkan ikuti tutorial dibawah ini:

Tutorial

Carilah kode di bawah ini pada template Anda dan tambahkan beberapa kode yang tertera pada bagian bawahnya

// Carilah kode dibawah ini:

]]></b:skin>

// Pada versi AMP carilah kode ini:

/*]]>*/</style>

// Letakan kode ini tepat sebelum kode diatas

@media screen and (max-width:640px){
  .navigation-mobile{margin: 0 10% 15px;border-radius: 25px;width: 80%;height: 45px;box-shadow: 0 6px 18px 0 rgba(9,32,76,.05)}
  .navigation-mobile svg{height: 18px}
  .navigation-mobile li.home-link{display: none}
  .navigation-menu .home{display: block}
}

// Berikut adalah contoh penempatan kode yang benar

@media screen and (max-width:640px){
  .navigation-mobile{margin: 0 10% 15px;border-radius: 25px;width: 80%;height: 45px;box-shadow: 0 6px 18px 0 rgba(9,32,76,.035)}
  .navigation-mobile svg{height: 18px}
  .navigation-mobile li.home-link{display: none}
  .navigation-menu .home{display: block}
}
  ]]></b:skin>

Simpan template Anda dan lihat perbedaanya

Fitur Tutorial