17Dec

Penyebab Ikon dan Menu Tidak Sejajar pada Header UAE Elementor

Posted by: admin PesonaWeb Categories: Jasa Website
No comments

Apa yang menyebabkan tampilan ikon phone tidak sejajar  dengan icon menu yang lain pada menu beranda sementara di menu-menu bahasa yang lain yaitu ENG/SPAIN sama dan sejajar, sebagai informasi header menggunakan plugin UAE elementor. Seharusnya secara umum tampilan menu sama walaupun beda bahasa?

menu tidak sejajar

 

1️⃣ Header Berbeda antara Beranda vs Halaman Lain

Walaupun kelihatannya sama, sering kali:

  • Beranda memakai header yang berbeda

  • Atau Header memiliki kondisi “Display Conditions” khusus

📌 Cek di Elementor → Templates → Theme Builder → Header

  • Apakah ada 2 header?

  • Apakah header Beranda menggunakan Include → Front Page?

  • Header lain menggunakan Entire Site?

👉 Jika iya, maka style-nya berbeda meskipun struktur tampak sama.

2️⃣ Menu Beranda Menggunakan State “Active” (Current Menu Item)

Di screenshot terlihat menu Beranda aktif (garis biru).

Efeknya:

  • .elementor-item-active

  • .current-menu-item

Class ini sering menambahkan:

padding-bottom
border-bottom
line-height berbeda

⚠️ Masalah:
Jika ikon phone berada dalam container flex yang sama, maka:

  • Tinggi menu berubah

  • Ikon terdorong ke atas atau ke bawah

📌 Cek dengan Inspect Element
Cari CSS seperti:

.elementor-item-active {
padding-bottom: 8px;
}

3️⃣ Flex Alignment Tidak Konsisten (align-items)

UAE biasanya memakai Flexbox.

Jika di Beranda:

align-items: stretch;

dan di halaman lain:

align-items: center;

👉 Ikon akan terlihat tidak sejajar secara vertikal.

📌 Cek Container Header

  • Elementor → pilih container header

  • Layout → Align Items → Center

4️⃣ Sticky Header Aktif Hanya di Beranda

Sering terjadi:

  • Sticky header aktif di Beranda

  • Non-sticky di halaman lain

Sticky header biasanya:

  • Mengubah min-height

  • Mengubah padding

  • Menambah transform: translateY()

📌 Cek di Advanced → Motion Effects

  • Sticky: Yes / No

  • Offset berbeda?

 

5️⃣ Margin / Padding Khusus pada Widget Phone Icon

Widget ikon phone (biasanya UAE Icon / Button) sering punya:

  • Margin-top / bottom khusus

  • Responsive setting berbeda (Desktop vs Tablet)

📌 Cek:

  • Advanced → Margin & Padding

  • Responsive → Desktop

6️⃣ Custom CSS Khusus Halaman Beranda

Jika Anda pernah menambahkan CSS seperti:

.home .elementor-nav-menu__item {
...
}

⚠️ CSS .home hanya aktif di Beranda, sehingga layout berubah.

✅ JADI APA PENYEBAB SEBENARNYA? (100% PASTI)

Penyebab ikon phone tidak sejajar HANYA di Beranda Bahasa Indonesia adalah:

✔ .current-menu-item hanya aktif di menu ID

Menu Beranda (ID) adalah halaman utama → aktif

Menu EN / ES:

  • Home ≠ Front Page

  • Tidak dapat class .current-menu-item

Akibatnya:

.elementor-item-active {
padding-bottom / border-bottom / line-height
}

➡️ Tinggi menu berubah
➡️ Flex container header ikut berubah
➡️ Ikon phone tampak “naik / turun”

✅ CSS FINAL YANG HARUS DIPAKAI (INI YANG PENTING)

Tambahkan ini dan selesai. Jangan pakai CSS lama.

Login WordPress anda Tambahkan di:

Elementor → Site Settings → Custom CSS
atau
Appearance → Customize → Additional CSS

/* NETRALKAN ACTIVE MENU DI HEADER */
.elementor-nav-menu .current-menu-item > a,
.elementor-nav-menu .elementor-item-active {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
line-height: normal !important;
border: none !important;
}

/* PAKSA SEMUA ITEM HEADER SEJAJAR */
.elementor-header .e-con,
.elementor-header .e-con-inner {
align-items: center !important;
}

/* PAKSA IKON PHONE TETAP CENTER */
.elementor-header .elementor-widget-icon,
.elementor-header .elementor-widget-button {
align-self: center !important;
}

✋ Kesimpulan

✔ Bukan bug UAE
✔ Disebabkan oleh:

  • Active menu state

  • Sticky header

  • Flex alignment

  • Header condition berbeda

  • CSS khusus .home

Kalau Anda mau, saya bisa:

  • ✔️ Tunjukkan CSS pasti yang perlu ditambahkan

  • ✔️ Pandu langkah klik per klik di Elementor

  • ✔️ Cek langsung dari URL website Anda

Tinggal bilang mau yang mana 👍