Memperbaiki Menu Navigasi Responsif Anda di Divi

Membuat menu navigasi responsif yang tampak hebat di semua ukuran layar bisa jadi sulit. Saya berharap itu tidak terlalu penting, tetapi karena navigasi biasanya ada di bagian atas setiap halaman situs Anda, itu adalah hal yang terlihat pertama di setiap halaman. Jadi penting untuk melakukannya dengan benar. Untungnya, penyesuai tema Divi memungkinkan Anda untuk menyesuaikan menu utama dengan beberapa opsi header yang cukup keren. Tetapi untuk gaya menu default dengan logo di sebelah kiri dan tautan menu di sebelah kanan, hal-hal dapat dengan mudah diacak-acak pada ukuran layar yang lebih kecil, terutama bila Anda memiliki terlalu banyak tautan yang memenuhi header. Saya tahu itu sering terjadi pada saya. Saya mendapatkan menu tampak tepat untuk desktop dan kemudian Anda memeriksanya di tablet (terutama iPad Pro) dan logo menunya tumpang tindih dan beberapa tautan telah melompat ke bawah satu baris.

Hari ini, saya akan memberi Anda beberapa solusi bermanfaat untuk menu navigasi yang ramai sehingga terlihat bagus bahkan pada ukuran layar yang tidak terlalu umum. Bagaimanapun, setidaknya untuk beberapa pengguna, kredibilitas situs Anda bergantung padanya.

Mari kita mulai.

Memperbaiki Menu Navigasi Responsif Anda di Divi

Berlangganan Saluran Youtube Kami

Empat Solusi untuk Menu Navigasi yang Ramai

Salah satu hal hebat tentang Divi adalah ia dibangun di atas tata letak grid yang lancar yang menggunakan kueri media (CSS terkotak) untuk menyesuaikan gaya situs Anda untuk ukuran layar yang berbeda. Titik di mana penyesuaian ini dilakukan adalah apa yang kita sebut breakpoints. Jika Anda berkomitmen untuk menyempurnakan menu navigasi utama Anda pada SEMUA ukuran layar, kemungkinan Anda perlu menggunakan menu kustomisasi menggunakan kueri media dan menyesuaikan titik henti sementara tertentu.

Masalah

Masalah paling umum yang saya temui saat menggunakan menu navigasi default Divi adalah ketika klien menginginkan banyak item menu tingkat atas. Memiliki lebih dari 5 item menu (atau memiliki item menu dengan ukuran font yang besar) pada menu navigasi utama akan sering membuat jeda baris dan logo membesar ketika ukuran layar mencapai lebar antara 980-1100 piksel (ukuran laptop kecil dan tablet besar). Saya yakin Anda pernah mengalami masalah ini sebelumnya, bahkan jika Anda tidak pernah menyadarinya. Ini terlihat seperti ini:

Tidak ideal. Jadi mari kita lihat empat solusi untuk masalah ini.

Solusi #1: Jadikan Menu Bar Fullwidth

Biasanya saya tidak akan menyarankan untuk membuat menu navigasi Anda menjadi fullwidth kecuali saya juga membuat seluruh situs saya menjadi fullwidth. Saya pikir konsistensi dalam desain itu penting. Namun terkadang ini merupakan kompromi yang baik jika itu berarti menu navigasi Anda terlihat bagus di semua perangkat. Dan itu adalah perbaikan sederhana juga.

Buka Penyesuai Tema > Tajuk & Navigasi > Bilah Menu Utama dan pilih Jadikan Lebar Penuh .

Solusi #2: Sesuaikan pengaturan Logo dan Font.

Solusi sederhana lainnya untuk masalah Anda adalah dengan menggunakan pengaturan penyesuai tema untuk menyesuaikan opsi Tinggi Maks Logo, Ukuran Teks, atau Font default.

Berhati-hatilah saat menyesuaikan opsi ini karena Anda tidak ingin mengorbankan desain dan keterbacaan Logo atau item menu Anda demi membuat perbaikan yang mudah.

Solusi #3: Menampilkan menu seluler di breakpoint baru.

Berikut adalah rentang umum untuk masing-masing breakpoint dalam Divi:

Desktop Besar: 1405px ke atas
Desktop Standar: antara 1100px dan 1405px
Laptop dan Tablet Besar: antara 980px dan 1100px
Tablet: antara 768 piksel dan 980 piksel
Ponsel cerdas dan Tablet kecil: antara 320 piksel dan 768 piksel;
Ponsel cerdas: antara 320 piksel dan 480 piksel;

Titik henti sementara di mana menu navigasi default berubah menjadi menu seluler (dengan navigasi hamburger) adalah 980px. Ukuran layar apa pun yang kurang dari 980 piksel akan menampilkan menu seluler.

Namun, jika Anda ingin menghindari jeda baris menu yang aneh, Anda mengubah breakpoint ke nilai yang berbeda. Katakanlah Anda ingin menampilkan menu seluler di sekitar 1024px, bukan 980px. Untuk melakukan ini, Anda perlu memasukkan beberapa CSS khusus di dalam kueri media untuk mengganti gaya default di Divi.

Buka Penyesuai Tema > CSS Tambahan dan masukkan yang berikut:

@media (max-width: 1024px) {
 #et_mobile_nav_menu {
 display: block;
 }

#top-menu {
 display: none;
 }
 }

Kueri media ini melakukan dua hal. Ini menyembunyikan menu biasa dan menampilkan menu seluler di breakpoint 1024px.

Solusi #4: Menyesuaikan Gaya Menu pada Breakpoint Tertentu

Solusi ini mungkin merupakan opsi terbaik karena memungkinkan Anda untuk memiliki kontrol paling besar atas menu Anda pada breakpoint tertentu. Anda dapat menargetkan item menu Anda dengan menggunakan kelas css mereka untuk membuat gaya kustom di kueri media Anda.

Berikut adalah CSS default Divi untuk item menu Anda:

#top-menu li {
    display: inline-block;
    padding-right: 22px;
    font-size: 14px;
}

Katakanlah Anda ingin ukuran font menu Anda menjadi 18px secara default tetapi Anda ingin mengubahnya menjadi 14px pada breakpoint tertentu. Dan untuk menghemat lebih banyak ruang, Anda dapat mengurangi padding menjadi 15px, bukan 22px. Anda dapat melakukan ini dengan menargetkan kelas css untuk semua item menu dan membuat kueri media

Buka Penyesuai Tema > CSS Tambahan dan masukkan yang berikut:

@media (max-width: 1200px) {
 #top-menu li, #top-menu li a {
 font-size: 14px;
 padding-right: 15px;
 }
 }

Apa yang dilakukan CSS ini adalah mengubah ukuran font menjadi 14px dan padding kanan menjadi 15px pada layar 1200px atau di bawahnya. Ini menciptakan transisi yang mulus saat menyesuaikan ukuran layar di desktop dan memungkinkan Anda untuk mempertahankan navigasi default di tablet besar dan laptop kecil.

Menyesuaikan Gaya Header lainnya

Ada lima gaya tajuk untuk dipilih dalam Penyesuai Tema Divi (tidak termasuk navigasi vertikal). Lima gaya termasuk Default (yang sudah dibahas dalam posting ini) Slide-in, Fullscreen, Centered, dan Centered Inline Logo.

Gaya Geser Masuk dan Layar Penuh

Jika Anda menginginkan desain situs web untuk gaya slide atau layar penuh, maka menu responsif Anda cukup mudah karena ikon hamburger navigasi seluler digunakan untuk memicu menu di semua ukuran layar.

Gaya Terpusat

Jika Anda menggunakan gaya terpusat, Anda memiliki lebih banyak ruang untuk item menu Anda untuk bernafas, tetapi jika Anda masih membutuhkan lebih banyak ruang, Anda dapat menggunakan solusi khusus yang sama yang kami gunakan untuk gaya default agar terlihat seperti yang Anda inginkan.

Gaya Logo Sebaris Terpusat

Terakhir, tajuk gaya logo sebaris tengah agak sulit untuk dilakukan sejak awal. Anda perlu memperbaiki beberapa hal jika Anda ingin logo berada di tengah halaman. Pertama, Anda harus memiliki jumlah item menu yang genap sehingga logo tengah tetap menjadi pusatnya.

Kedua, jumlah teks yang Anda gunakan untuk setiap item menu akan menentukan titik tengah logo. Jika Anda memiliki lebih banyak teks di satu sisi, logo akan hilang sedikit. Ini bukan masalah besar untuk sebagian besar situasi tetapi jika Anda memiliki tajuk dengan elemen terpusat langsung di bawah logo, ini bisa menjadi masalah yang jelas yang perlu Anda perbaiki.

Perhatikan bagaimana logo sedikit di tengah di menu dibandingkan dengan logo di tengah di bagian header.

Sekarang saya akan mempersingkat label item menu "Elemen Informasi" menjadi "Informasi". Sekarang lihat bagaimana logo bergeser lebih ke tengah.

Solusi ini mungkin yang Anda butuhkan untuk mendapatkan logo di tempat yang Anda inginkan. Anda mungkin bisa lolos dengan mengubah sesuatu seperti "Tentang Kami" menjadi "Tentang" atau sebaliknya untuk membuat penyesuaian kecil itu.

Namun, ini bisa membuat Anda sedikit frustasi jika Anda seorang perfeksionis (saya dapat menikmatinya. Percayalah.) Jadi, ada tingkat penyesuaian yang lebih dalam yang dapat Anda lakukan jika Anda ingin membuat lebih banyak penyesuaian. Alih-alih menyesuaikan teks aktual di item menu untuk menyesuaikan titik tengah logo, Anda dapat menambahkan kelas css khusus ke item apa pun dan memberikannya beberapa bantalan ke kanan atau kiri. Ini akan memberi Anda dorongan terakhir yang Anda butuhkan untuk membuat semuanya terpusat.

Dari dasbor wordpress, buka Appearance > Menus dan pastikan Anda memiliki CSS Classes yang dicentang di area Screen Options.

Kemudian alihkan buka item menu yang ingin Anda targetkan. Kemudian masukkan kelas CSS ke dalam kotak input Kelas CSS. Saya memanggil saya "dorongan".

Setelah itu, buka Divi > Theme Customizer > Additional CSS dan tambahkan custom CSS berikut:

#top-menu li.nudge  {
padding-right: 32px;
}

Dengan css ini, hanya item dengan kelas “nudge” yang diberi padding kanan 32px; Itu mendorong logo cukup untuk membuatnya terpusat.

Itu dia!

Pikiran Penutup

Divi membuat pembuatan situs web menjadi menyenangkan dan mudah. Namun terkadang, tuntutan pekerjaan (dan klien kami) mengharuskan kami bekerja lebih keras untuk memastikan situs kami bagus. Dan yang membedakan situs bagus dari situs hebat adalah detail kecilnya. Cara kerja menu navigasi responsif Anda adalah salah satu detail penting yang ingin Anda perbaiki. Sebagian besar waktu itu adalah hal pertama yang akan dilihat dan digunakan pengguna Anda di setiap halaman situs Anda. Menu yang terlihat rusak bisa meninggalkan kesan pertama yang buruk. Saya harap posting ini akan membantu "mendorong" Anda ke arah yang benar (maaf tidak bisa menahan diri :)).

Saya yakin ada lebih banyak masalah dan solusi di luar sana yang tidak saya bahas dalam posting ini. Jangan ragu untuk mempostingnya di komentar. Saya berharap mendengar kabar dari kamu.

Bersulang!