Cara Mencocokkan Bilah Menu Desktop & Seluler Anda dengan Divi

Di pos Divi hari ini, kami akan membagikan tip singkat yang akan membantu Anda menyempurnakan desain seluler Anda. Kita semua tahu bahwa desain Anda di seluler sama pentingnya dengan di desktop, tetapi karena beberapa pengaturan standar dalam Divi, tidak semua perubahan yang Anda buat di Penyesuai Tema terlihat sama di Desktop seperti di seluler.

Apa yang akan kita lakukan dalam posting ini, khususnya, adalah menunjukkan kepada Anda cara membuat bilah menu seluler yang lebih kecil yang terlihat sama dengan bilah menu di desktop saat menggunakan tinggi logo maksimum dan tinggi menu minimum. Secara default, tampilan di seluler dan desktop berbeda. Hanya karena Anda telah menetapkan tinggi menu dan tinggi maksimum logo tertentu, tidak berarti hal yang sama akan berlaku untuk seluler.

Perbedaan untuk Seluler & Desktop

Ada banyak situs web yang sengaja memilih untuk memiliki bilah menu utama dengan ketinggian yang tidak terlalu tinggi. Itu hanya terlihat lebih elegan dan memakan lebih sedikit ruang, sesuatu yang pasti menarik untuk dipertimbangkan jika Anda menggunakan navigasi tetap juga.

Saat Anda memilih nilai tertinggi untuk Tinggi Maks Logo (yaitu 100) di dalam Penyesuai Tema Anda, dan nilai terendah dari Tinggi Menu (yaitu 30), Anda akan mendapatkan hasil berikut di desktop:

Namun, proporsi logo dan tinggi menu berbeda untuk seluler. Jika Anda telah memilih nilai tertinggi untuk Tinggi Maks Logo dan nilai terendah untuk Tinggi Menu, Anda tidak akan mendapatkan hasil yang sama seperti di desktop. Sebagai gantinya, hasil yang akan Anda dapatkan akan terlihat seperti ini:

Hasil

Sekarang, yang akan kami lakukan adalah menunjukkan kepada Anda bagaimana membuat tata letak yang sama berlaku untuk bilah menu seluler Anda. Itu berarti logo akan memiliki ketinggian maksimum pada menu. Selain itu, bilah menu itu sendiri akan jauh lebih kecil. Pada akhirnya, Anda akan memiliki lebih banyak tempat di layar untuk menampilkan konten di halaman Anda.

Setelah mengikuti tutorial ini langkah demi langkah, Anda akan mencapai hasil berikut:

Yang jelas lebih mirip versi desktop:

Cara Mencocokkan Bilah Menu Desktop & Seluler Anda dengan Divi

Berlangganan Saluran Youtube Kami

Pengaturan Bilah Menu Utama

Hal pertama yang akan kita lakukan adalah membuat perubahan yang diperlukan pada Bilah Menu Utama di dalam Penyesuai Tema. Jika Anda menggunakan Dasbor WordPress, buka Appearance > Customize > Header & Navigation > Primary Menu Bar dan pastikan pengaturan berikut berlaku:

• Sembunyikan Gambar Logo: Nonaktifkan
• Tinggi Menu: 30
• Tinggi Maks Logo: 100

Kode CSS Tambahan Bilah Menu Seluler

Hal berikutnya yang perlu kita lakukan adalah menambahkan beberapa kode CSS tambahan untuk membuat bilah menu seluler terlihat sama seperti bilah menu di desktop. Kita bisa memilih untuk menambahkan kode CSS pada satu halaman tertentu (jika kita hanya ingin menampilkan menu seperti itu pada halaman tertentu saja) atau ke seluruh website. Biasanya, Anda akan menerapkan kode CSS ke seluruh situs web untuk menjaga konsistensi yang dibutuhkan di situs web Anda, tetapi itu terserah Anda.

Tambahkan Kode CSS ke Satu Halaman Secara Khusus

Untuk menambahkan kode CSS ke satu halaman tertentu, Anda harus membuka halaman di dalam dasbor WordPress Anda. Saat menggunakan pembuat Divi, Anda harus mengklik ikon berikut di dalamnya:

Selanjutnya, Anda dapat mengambil baris kode CSS berikut dan menempatkannya di bidang CSS Kustom:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Tambahkan Kode CSS ke Seluruh Situs Web

Kemungkinan lain, dan mungkin yang paling sering digunakan, adalah menambahkan kode ke seluruh situs web Anda. Ada dua cara untuk melakukannya.

Melalui Penyesuai Tema

Metode pertama adalah dengan menambahkan kode CSS ke Penyesuai Tema Anda. Untuk melakukannya, buka Dasbor WordPress > Tampilan > Kustomisasi > CSS Tambahan > Tempatkan baris kode CSS berikut di bidang CSS Khusus:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Opsi ini memungkinkan Anda untuk melihat perubahan yang terjadi secara real time. Ini mungkin pilihan yang paling menarik jika Anda akan mengubah beberapa hal dalam kode dan ingin melihat tampilannya sebelum menyimpan perubahan.

Melalui Opsi Tema

Metode kedua adalah dengan menambahkan kode CSS ke Opsi Tema. Untuk melakukannya, buka Dasbor WordPress > Divi > Opsi Tema > Gulir ke bawah tab Umum dan tempatkan kode CSS berikut di bidang CSS Khusus:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Ubah Kode Sesuai Preferensi Anda Sendiri

Tentu saja, ini bukan satu-satunya cara Anda dapat membuat bilah menu ponsel terlihat seperti itu. Jika Anda menerapkan pengaturan yang berbeda ke Bilah Menu Utama di Penyesuai Tema, kemungkinan besar Anda juga perlu membuat perubahan di dalam kode CSS. Namun, Kelas CSS dan ID CSS yang akan Anda gunakan adalah sama.

Namun, salah satu hal yang pasti harus Anda perhitungkan adalah bantalan atas penampung halaman. Nilai yang kami tetapkan dalam kode CSS kami cocok dengan perubahan lain yang kami buat. Namun, jika Anda mengubah nilai di kelas lain, Anda harus memastikan padding atas tetap benar. Cara termudah untuk melakukannya adalah memulai dengan nilai yang lebih tinggi dan mengubah nilainya hingga Anda melihat wadah halaman terpasang pada tempatnya.

Hasil

Jika Anda telah mengikuti tutorial ini langkah demi langkah, Anda seharusnya dapat mencapai hasil berikut untuk bilah menu ponsel Anda:

Yang terlihat hampir persis sama dengan hasil yang Anda peroleh di desktop:

Sebelum melakukan perubahan CSS apa pun, hasilnya di Seluler terlihat seperti ini:

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat bilah menu seluler Anda lebih kecil dan pas dengan bilah menu di desktop. Anda cukup menambahkan kode CSS yang diperlukan ke halaman tertentu atau seluruh situs web untuk membuat metode ini berfungsi. Jika Anda memiliki pertanyaan atau saran; pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!