/* ========================================================== NAVIGATION — MAS Pemisah antar-item menu & submenu multi-kolom untuk "Cabang" Struktur asli (GeneratePress Premium — Menu Plus & Off-Canvas): - Desktop / Sticky : #primary-menu > ul.sf-menu (Superfish + hoverIntent) - Mobile Off-canvas: #generate-slideout-menu (offside) Ketiganya berbagi class ".main-navigation", jadi 1 set CSS ini otomatis berlaku di semua konteks. File ini TIDAK menyentuh logika buka/tutup submenu (hover, tap, offcanvas) — itu tetap sepenuhnya ditangani hoverintent-js & generate-offside-js bawaan GP Premium. Murni styling presentational. CATATAN: sebelumnya pakai CSS column-count → urutan isi jadi ATAS-KE-BAWAH (mengisi 1 kolom penuh dulu). Diganti CSS Grid (grid-auto-flow: row) supaya urutan isi KIRI-KE-KANAN. ========================================================== */ /* ========================================================== BACKGROUND NAVIGASI — GRADIENT ORANGE (MAS) Override warna solid dari Customizer > Warna > Navigasi Utama > Background Navigasi. Selector digabung dengan semua class yang ada di elemen nav (has-sticky-branding, navigation-stick) supaya spesifisitasnya cukup tinggi untuk menang tanpa !important. Kalau nanti ternyata masih kalah / ke-override warna Customizer, tambah !important di akhir baris background. 4 warna: Sunset Orange (lama) → Primary → Secondary → Tertiary, diagonal landai ~100deg (nav bar pendek & lebar), Tertiary dominan (60-100%) supaya kontras cukup untuk ikon/teks putih. ========================================================== */ nav.main-navigation.has-sticky-branding, nav.main-navigation.navigation-stick { background: linear-gradient( 180deg, var(--tertiary-orange) 0%, var(--second-orange) 15%, var(--primary-orange) 50%, var(--second-orange) 85%, var(--tertiary-orange) 100% ); } /* --- Pemisah antar item menu utama (top-level, desktop) --- */ .main-navigation .sf-menu > li.menu-item:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.35); } /* --- Pemisah antar item di dalam submenu/dropdown (semua level) --- */ .main-navigation .sub-menu li.menu-item { border-bottom: 1px solid rgba(255, 255, 255, 0.25); } .main-navigation .sub-menu li.menu-item:last-child { border-bottom: none; } /* --- Submenu besar (mis. "Cabang" — 20+ kota) otomatis 3 kolom di desktop, urutan kiri→kanan lalu turun baris (grid-auto-flow: row, ini nilai default tapi ditulis eksplisit biar jelas maksudnya). Dideteksi murni via CSS :has() saat item ke-11 muncul, tanpa JS. --- */ .main-navigation .sub-menu:has(> li:nth-child(11)) { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; column-gap: 0; row-gap: 0; min-width: 560px; /* buka melebar ke kanan dari anchor, jangan overflow ke kiri */ left: 0; right: auto; } /* Border pemisah antar-kolom (kanan) & antar-baris (bawah) saat mode grid. Kolom terakhir (kelipatan ke-3) tidak perlu border kanan. */ .main-navigation .sub-menu:has(> li:nth-child(11)) li.menu-item { border-right: 1px solid rgba(255, 255, 255, 0.25); break-inside: avoid; } .main-navigation .sub-menu:has(> li:nth-child(11)) li.menu-item:nth-child(3n) { border-right: none; } /* Fallback untuk browser lama tanpa dukungan :has() (mis. Safari <15.4) — tandai manual lewat CSS Class "mas-submenu-cabang" pada menu item di Appearance → Menus jika perlu jaminan 100% kompatibel. */ .main-navigation .sub-menu.mas-submenu-cabang { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; column-gap: 0; row-gap: 0; min-width: 560px; left: 0; right: auto; } .main-navigation .sub-menu.mas-submenu-cabang li.menu-item { border-right: 1px solid rgba(255, 255, 255, 0.25); break-inside: avoid; } .main-navigation .sub-menu.mas-submenu-cabang li.menu-item:nth-child(3n) { border-right: none; } /* --- Mobile off-canvas: submenu besar jadi 2 kolom, urutan kiri→kanan, dengan scroll internal supaya tidak memanjangkan panel offcanvas berlebihan --- */ @media (max-width: 768px) { .main-navigation.slideout-navigation .sub-menu:has(> li:nth-child(11)), .main-navigation.slideout-navigation .sub-menu.mas-submenu-cabang { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; min-width: 0; max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* di mobile kolom terakhir jadi kelipatan ke-2, bukan ke-3 */ .main-navigation.slideout-navigation .sub-menu:has(> li:nth-child(11)) li.menu-item:nth-child(3n), .main-navigation.slideout-navigation .sub-menu.mas-submenu-cabang li.menu-item:nth-child(3n) { border-right: 1px solid rgba(255, 255, 255, 0.25); } .main-navigation.slideout-navigation .sub-menu:has(> li:nth-child(11)) li.menu-item:nth-child(2n), .main-navigation.slideout-navigation .sub-menu.mas-submenu-cabang li.menu-item:nth-child(2n) { border-right: none; } } /* ========================================================== TOMBOL PANAH TOGGLE — SOLID ORANGE + PANAH PUTIH TEBAL (MAS) Background solid orange, ikon putih, diperbesar supaya tegas. Touch-target 48px. Konsisten di semua state. ========================================================== */ @media (max-width: 768px) { .main-navigation.slideout-navigation .dropdown-menu-toggle { background-color: #FF7F00; border: none; border-radius: 6px; margin-top: 6px; margin-bottom: 6px; margin-right: 8px; margin-left: auto; min-width: 48px; min-height: 48px; color: #ffffff; } /* Ikon putih + diperbesar sedikit supaya terkesan lebih tebal/bold */ .main-navigation.slideout-navigation .dropdown-menu-toggle .gp-icon svg { transform: scale(1.35); } .main-navigation.slideout-navigation .dropdown-menu-toggle .gp-icon svg path { fill: #ffffff !important; } /* Perbesar area tap & rapikan jarak dengan teks link */ .main-navigation.slideout-navigation .menu-item-has-children > a { padding-right: 0; gap: 4px; } /* Konsisten di semua state — tidak berubah saat diklik/terbuka */ .main-navigation.slideout-navigation .dropdown-menu-toggle:hover, .main-navigation.slideout-navigation .dropdown-menu-toggle:active, .main-navigation.slideout-navigation .dropdown-menu-toggle:focus, .main-navigation.slideout-navigation .dropdown-menu-toggle[aria-expanded="true"] { background-color: #d5893b; color: #ffffff; } .main-navigation.slideout-navigation .dropdown-menu-toggle:hover .gp-icon svg path, .main-navigation.slideout-navigation .dropdown-menu-toggle:active .gp-icon svg path, .main-navigation.slideout-navigation .dropdown-menu-toggle:focus .gp-icon svg path, .main-navigation.slideout-navigation .dropdown-menu-toggle[aria-expanded="true"] .gp-icon svg path { fill: #ffffff !important; } } /* ========================================================== TINGGI BARIS SERAGAM — SEMUA MENU UTAMA (MAS) Sebelumnya hanya
  • dengan toggle (.menu-item-has-children) yang tingginya 48px pas-pasan dengan tombol. Sekarang SEMUA baris top-level (dengan atau tanpa toggle, mis. "Beranda", "Artikel") disamakan tingginya ke 60px supaya: 1) Rapi & konsisten secara visual antar semua baris. 2) Tombol toggle (48px) punya jarak "napas" aman ±6px di atas & bawah, tidak menempel ke garis pemisah/baris tetangga. Hanya level menu utama (root