/* ============================================================ OJS 3.3 — BOOTSTRAP 3 GRHRM — RESPONSIVE MOBILE FIX VERSION 9 ============================================================ BASE: - Keeps the desktop V8 structure - Full-width header image - Navigation below image - Mobile header becomes: HEADER IMAGE ↓ COMPACT NAVIGATION BAR ↓ CONTENT - Removes the large empty blue area seen on mobile - Prevents desktop navigation rules from breaking mobile ============================================================ */ /* ========================================================= 1. GLOBAL ========================================================= */ html, body { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; } /* ========================================================= 2. HEADER ========================================================= */ #headerNavigationContainer { position: relative !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* ========================================================= 3. FULL WIDTH IMAGE ========================================================= */ #headerNavigationContainer > .container-fluid:nth-of-type(2) { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; } #headerNavigationContainer .navbar-header { float: none !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } #headerNavigationContainer .site-name { display: block !important; width: 100% !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } #headerNavigationContainer .navbar-brand.navbar-brand-logo { display: block !important; width: 100% !important; max-width: none !important; float: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; background: transparent !important; } #headerNavigationContainer .navbar-brand.navbar-brand-logo img { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; object-fit: contain !important; } /* ========================================================= 4. NAVIGATION BAR ========================================================= */ #headerNavigationContainer #nav-menu { position: relative !important; width: 100% !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; min-height: 50px !important; overflow: visible !important; } /* ========================================================= 5. DESKTOP — PRESERVE V8 ========================================================= */ @media (min-width: 768px) { #headerNavigationContainer > .container-fluid:first-child { position: static !important; width: 100% !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } #headerNavigationContainer #nav-menu { display: flex !important; align-items: center !important; height: 50px !important; min-height: 50px !important; } #headerNavigationContainer #nav-menu .navbar-nav { display: flex !important; align-items: center !important; float: none !important; margin: 0 !important; padding: 0 !important; } #headerNavigationContainer #nav-menu .navbar-nav > li { float: none !important; display: block !important; margin: 0 !important; padding: 0 !important; } #headerNavigationContainer #nav-menu .navbar-nav > li > a { display: flex !important; align-items: center !important; height: 50px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Search */ #headerNavigationContainer #nav-menu .pkp_search, #headerNavigationContainer #nav-menu .search { display: flex !important; align-items: center !important; height: 50px !important; margin-left: auto !important; } /* User navigation on same desktop row */ #headerNavigationContainer .pkp_navigation_user, #headerNavigationContainer #navigationUser { position: absolute !important; right: 365px !important; bottom: 0 !important; left: auto !important; top: auto !important; z-index: 5000 !important; display: flex !important; align-items: center !important; width: auto !important; height: 50px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } #headerNavigationContainer .pkp_navigation_user > li, #headerNavigationContainer #navigationUser > li { display: flex !important; align-items: center !important; float: none !important; height: 50px !important; margin: 0 !important; padding: 0 !important; } #headerNavigationContainer .pkp_navigation_user > li > a, #headerNavigationContainer #navigationUser > li > a { display: flex !important; align-items: center !important; height: 50px !important; padding: 0 10px !important; white-space: nowrap !important; line-height: 50px !important; background: transparent !important; } #headerNavigationContainer .pkp_navigation_user_wrapper, #headerNavigationContainer .navigation_user_wrapper, #headerNavigationContainer #navigationUserWrapper { position: static !important; width: auto !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } } /* ========================================================= 6. MOBILE — COMPLETE RESPONSIVE REBUILD ========================================================= */ @media (max-width: 767px) { /* ----------------------------------------------- Remove the giant blue area above the image ----------------------------------------------- */ #headerNavigationContainer > .container-fluid:first-child { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; z-index: 5000 !important; pointer-events: none !important; } /* Keep user controls from creating height */ #headerNavigationContainer > .container-fluid:first-child .pkp_navigation_user_wrapper, #headerNavigationContainer > .container-fluid:first-child .navigation_user_wrapper, #headerNavigationContainer > .container-fluid:first-child #navigationUserWrapper { position: absolute !important; top: 0 !important; right: 0 !important; width: auto !important; height: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; } /* Hide user menu on the collapsed mobile header so Admin does not sit above the image */ #headerNavigationContainer .pkp_navigation_user, #headerNavigationContainer #navigationUser { display: none !important; } /* ----------------------------------------------- Main header ----------------------------------------------- */ #headerNavigationContainer > .container-fluid:nth-of-type(2) { width: 100% !important; max-width: none !important; display: flex !important; flex-direction: column !important; margin: 0 !important; padding: 0 !important; } /* ----------------------------------------------- Full-width image ----------------------------------------------- */ #headerNavigationContainer .navbar-header { width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } #headerNavigationContainer .site-name { width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; } #headerNavigationContainer .navbar-brand.navbar-brand-logo { display: block !important; width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; line-height: 0 !important; } #headerNavigationContainer .navbar-brand.navbar-brand-logo img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; } /* ----------------------------------------------- Mobile navigation bar ----------------------------------------------- */ #headerNavigationContainer #nav-menu { position: relative !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; float: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* Bootstrap 3 collapsed menu. The hamburger stays in the navigation bar BELOW the header image. */ #headerNavigationContainer #nav-menu.collapse { display: none !important; } #headerNavigationContainer #nav-menu.collapse.in { display: block !important; } /* ----------------------------------------------- Mobile hamburger button ----------------------------------------------- */ #headerNavigationContainer .navbar-toggle { display: block !important; float: right !important; margin: 8px 12px 8px 0 !important; padding: 8px 10px !important; height: 40px !important; width: 48px !important; border-radius: 5px !important; } #headerNavigationContainer .navbar-toggle .icon-bar { display: block !important; width: 24px !important; height: 3px !important; margin: 4px auto !important; } /* ----------------------------------------------- Mobile menu items ----------------------------------------------- */ #headerNavigationContainer #nav-menu .navbar-nav { display: block !important; float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } #headerNavigationContainer #nav-menu .navbar-nav > li { display: block !important; width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; } #headerNavigationContainer #nav-menu .navbar-nav > li > a { display: block !important; width: 100% !important; height: auto !important; min-height: 44px !important; padding: 12px 16px !important; line-height: 20px !important; } /* ----------------------------------------------- Mobile search ----------------------------------------------- */ #headerNavigationContainer #nav-menu .pkp_search, #headerNavigationContainer #nav-menu .search { display: block !important; width: 100% !important; float: none !important; margin: 0 !important; padding: 10px 12px !important; } #headerNavigationContainer #nav-menu .pkp_search input, #headerNavigationContainer #nav-menu .search input { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* ----------------------------------------------- User links inside expanded mobile navigation ----------------------------------------------- */ #headerNavigationContainer #nav-menu .pkp_navigation_user, #headerNavigationContainer #nav-menu #navigationUser { display: block !important; position: static !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; } #headerNavigationContainer #nav-menu .pkp_navigation_user > li, #headerNavigationContainer #nav-menu #navigationUser > li { display: block !important; width: 100% !important; height: auto !important; float: none !important; } #headerNavigationContainer #nav-menu .pkp_navigation_user > li > a, #headerNavigationContainer #nav-menu #navigationUser > li > a { display: block !important; width: 100% !important; height: auto !important; padding: 12px 16px !important; line-height: 20px !important; } /* ----------------------------------------------- Content safety ----------------------------------------------- */ .pkp_structure_page, .pkp_structure_content, .pkp_structure_main, .pkp_structure_sidebar { max-width: 100% !important; box-sizing: border-box !important; } .pkp_structure_page { overflow-x: hidden !important; } /* Images/content must never overflow */ .pkp_structure_main img, .pkp_structure_sidebar img { max-width: 100% !important; height: auto !important; } /* Tables */ .pkp_structure_main table { max-width: 100% !important; } /* Long URLs/text */ .pkp_structure_main, .pkp_structure_sidebar { overflow-wrap: break-word !important; word-wrap: break-word !important; } } /* ========================================================= 7. VERY SMALL PHONES ========================================================= */ @media (max-width: 480px) { #headerNavigationContainer .navbar-brand.navbar-brand-logo img { width: 100% !important; height: auto !important; } #headerNavigationContainer .navbar-toggle { margin-right: 8px !important; } .pkp_structure_main, .pkp_structure_sidebar { width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; } } /* ========================================================= 8. HIDE PKP / OJS FOOTER BRANDING ========================================================= */ .pkp_brand_footer, .pkp_footer_content .pkp_brand_footer, footer .pkp_brand_footer { display: none !important; } /* ========================================================= 9. NO CUSTOM BLOCK STYLING ========================================================= */ /* ========================================================= END V9 ============================================================ */ /* ========================================================= V10 MOBILE OVERRIDE TUJUAN: - HEADER IMAGE menjadi elemen PALING ATAS - Tidak ada lagi bidang biru kosong di atas gambar - Tombol hamburger mengambang DI ATAS GAMBAR - Gambar tetap 100% lebar viewport - Saat menu dibuka, menu tetap muncul normal ========================================================= */ @media (max-width: 767px) { /* ----------------------------------------------------- 1. Area header utama: jangan memberi ruang biru ----------------------------------------------------- */ #headerNavigationContainer { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } #headerNavigationContainer > .container-fluid:nth-of-type(2) { position: relative !important; display: flex !important; flex-direction: column !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; } /* ----------------------------------------------------- 2. NAVBAR HEADER DIPINDAHKAN KELUAR FLOW sehingga TIDAK membuat ruang biru di atas gambar ----------------------------------------------------- */ #headerNavigationContainer .navbar-header { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 0 !important; min-height: 0 !important; float: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; z-index: 10000 !important; pointer-events: none !important; } /* Jika theme memberikan background pada navbar-header */ #headerNavigationContainer .navbar-header::before, #headerNavigationContainer .navbar-header::after { display: none !important; background: transparent !important; } /* ----------------------------------------------------- 3. GAMBAR = ELEMEN PERTAMA DAN FULL WIDTH ----------------------------------------------------- */ #headerNavigationContainer .site-name { position: relative !important; display: block !important; width: 100vw !important; max-width: 100vw !important; float: none !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; z-index: 1 !important; } #headerNavigationContainer .navbar-brand.navbar-brand-logo { display: block !important; width: 100vw !important; max-width: 100vw !important; float: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; background: transparent !important; border: 0 !important; } #headerNavigationContainer .navbar-brand.navbar-brand-logo img { display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; object-fit: fill !important; } /* ----------------------------------------------------- 4. HAMBURGER FLOATING DI ATAS GAMBAR ----------------------------------------------------- */ #headerNavigationContainer .navbar-toggle { display: block !important; position: absolute !important; top: 14px !important; right: 12px !important; bottom: auto !important; left: auto !important; float: none !important; width: 48px !important; height: 40px !important; margin: 0 !important; padding: 8px 10px !important; box-sizing: border-box !important; border-radius: 8px !important; background: #198dcc !important; border: 1px solid rgba(255,255,255,.10) !important; z-index: 10001 !important; pointer-events: auto !important; box-shadow: 0 4px 14px rgba(0,0,0,.16) !important; } #headerNavigationContainer .navbar-toggle:hover, #headerNavigationContainer .navbar-toggle:focus { background: #198dcc !important; outline: none !important; } #headerNavigationContainer .navbar-toggle .icon-bar { display: block !important; width: 24px !important; height: 3px !important; margin: 4px auto !important; background: #fff !important; border-radius: 2px !important; } /* ----------------------------------------------------- 5. NAVIGATION MENU Tetap berada setelah gambar ketika dibuka ----------------------------------------------------- */ #headerNavigationContainer #nav-menu { position: relative !important; width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; z-index: 20 !important; } /* collapsed = tidak mengambil ruang */ #headerNavigationContainer #nav-menu.collapse { display: none !important; } /* expanded = muncul setelah header image */ #headerNavigationContainer #nav-menu.collapse.in { display: block !important; width: 100% !important; height: auto !important; overflow: visible !important; } /* ----------------------------------------------------- 6. HAPUS HEIGHT / BACKGROUND DARI WRAPPER MOBILE ----------------------------------------------------- */ #headerNavigationContainer > .container-fluid:first-child { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; z-index: 9999 !important; pointer-events: none !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 480px) { #headerNavigationContainer .navbar-toggle { top: 10px !important; right: 8px !important; } #headerNavigationContainer .navbar-brand.navbar-brand-logo img { width: 100vw !important; max-width: 100vw !important; height: auto !important; } } /* ========================================================= END V10 MOBILE OVERRIDE ========================================================= */ /* ========================================================= V11 — MOBILE HEADER FLOW FIX FIX: CONTENT TIDAK BOLEH TERTUTUP HEADER IMAGE ========================================================= */ @media (max-width: 767px) { /* * PENTING: * navbar-header kembali berada di FLOW normal. * Jangan gunakan position:absolute pada wrapper gambar, * karena itu membuat content naik ke belakang header. */ #headerNavigationContainer .navbar-header { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; float: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; overflow: visible !important; z-index: 10 !important; } /* * Site name/image tetap menjadi bagian dari flow. */ #headerNavigationContainer .site-name { position: relative !important; display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; float: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } #headerNavigationContainer .navbar-brand.navbar-brand-logo { position: relative !important; display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; float: none !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; background: transparent !important; border: 0 !important; } #headerNavigationContainer .navbar-brand.navbar-brand-logo img { display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; object-fit: contain !important; } /* * Hamburger sekarang overlay pada gambar, * tetapi TIDAK mengeluarkan wrapper gambar dari flow. */ #headerNavigationContainer .navbar-toggle { position: absolute !important; top: 14px !important; right: 12px !important; bottom: auto !important; left: auto !important; display: block !important; float: none !important; width: 48px !important; height: 40px !important; margin: 0 !important; padding: 8px 10px !important; z-index: 1000 !important; pointer-events: auto !important; background: #198dcc !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 8px !important; box-shadow: 0 4px 14px rgba(0,0,0,.16) !important; } /* * Navigation tetap setelah gambar. */ #headerNavigationContainer #nav-menu { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; float: none !important; margin: 0 !important; padding: 0 !important; z-index: 20 !important; } /* * Pastikan wrapper header kedua tidak diberi * height/padding yang menyebabkan overlap. */ #headerNavigationContainer > .container-fluid:nth-of-type(2) { position: relative !important; display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* * Header container sendiri mengikuti tinggi gambar. */ #headerNavigationContainer { position: relative !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* * Tidak boleh ada negative margin dari content * yang menariknya ke atas header. */ .pkp_structure_page, .pkp_structure_content, .pkp_structure_main { position: relative !important; top: auto !important; } } /* ========================================================= END V11 ========================================================= */ /* ========================================================= V12 — DESKTOP NAVIGATION SPACING FIX FIX: REGISTER / LOGIN TIDAK BERTUMPUK DENGAN MENU UTAMA ========================================================= */ @media (min-width: 768px) { /* * Beri ruang horizontal yang konsisten pada menu utama. * Tidak mengubah warna, ukuran bar, atau struktur OJS. */ #headerNavigationContainer #nav-menu .navbar-nav > li > a { padding-left: 16px !important; padding-right: 16px !important; white-space: nowrap !important; box-sizing: border-box !important; } /* * User navigation (Register / Login / Admin) digeser * sedikit ke kanan agar tidak menimpa "Announcements". * * Pada Bootstrap 3 theme yang digunakan, user navigation * berada pada wrapper berbeda sehingga tetap perlu absolute. */ #headerNavigationContainer .pkp_navigation_user, #headerNavigationContainer #navigationUser { right: 270px !important; left: auto !important; width: auto !important; min-width: max-content !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; white-space: nowrap !important; } #headerNavigationContainer .pkp_navigation_user > li, #headerNavigationContainer #navigationUser > li { flex: 0 0 auto !important; width: auto !important; display: flex !important; white-space: nowrap !important; } #headerNavigationContainer .pkp_navigation_user > li > a, #headerNavigationContainer #navigationUser > li > a { padding-left: 12px !important; padding-right: 12px !important; white-space: nowrap !important; word-break: keep-all !important; overflow: visible !important; } /* * Search tetap berada di sisi kanan dan tidak tertutup * oleh user navigation. */ #headerNavigationContainer #nav-menu .pkp_search, #headerNavigationContainer #nav-menu .search { position: relative !important; z-index: 100 !important; flex: 0 0 auto !important; margin-left: auto !important; } /* * Sedikit perkecil area search agar tersedia ruang * yang cukup untuk Register + Login pada layar desktop. */ #headerNavigationContainer #nav-menu .pkp_search input, #headerNavigationContainer #nav-menu .search input { box-sizing: border-box !important; } } /* ========================================================= MOBILE — JANGAN TERPENGARUH PERBAIKAN DESKTOP ========================================================= */ @media (max-width: 767px) { #headerNavigationContainer .pkp_navigation_user, #headerNavigationContainer #navigationUser { right: auto !important; left: auto !important; } } /* ========================================================= END V12 ========================================================= */ /* ========================================================= V13 — FINAL NAVIGATION STRUCTURE FIX DESKTOP: - Register/Login tidak bertumpuk dengan menu utama - Search diperkecil agar semua elemen punya ruang MOBILE: - Register/Login ikut muncul di bawah menu hamburger - Tidak lagi hilang karena user navigation disembunyikan ========================================================= */ /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 768px) { /* * Gunakan ruang navbar secara efisien. * Search dibuat lebih pendek sehingga tersedia ruang * untuk Register + Login. */ #headerNavigationContainer #nav-menu .pkp_search, #headerNavigationContainer #nav-menu .search { flex: 0 0 auto !important; width: 330px !important; max-width: 330px !important; margin-left: auto !important; margin-right: 0 !important; } #headerNavigationContainer #nav-menu .pkp_search input, #headerNavigationContainer #nav-menu .search input { width: 250px !important; max-width: 250px !important; min-width: 0 !important; box-sizing: border-box !important; } /* * Register / Login ditempatkan tepat sebelum area Search. * Tidak lagi menggunakan posisi yang menimpa Announcements. */ #headerNavigationContainer .pkp_navigation_user, #headerNavigationContainer #navigationUser { position: absolute !important; top: 0 !important; right: 335px !important; bottom: auto !important; left: auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; min-width: max-content !important; max-width: none !important; height: 50px !important; margin: 0 !important; padding: 0 !important; float: none !important; flex-wrap: nowrap !important; white-space: nowrap !important; z-index: 5000 !important; } #headerNavigationContainer .pkp_navigation_user > li, #headerNavigationContainer #navigationUser > li { display: flex !important; align-items: center !important; width: auto !important; min-width: max-content !important; height: 50px !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; float: none !important; } #headerNavigationContainer .pkp_navigation_user > li > a, #headerNavigationContainer #navigationUser > li > a { display: flex !important; align-items: center !important; width: auto !important; min-width: max-content !important; height: 50px !important; padding: 0 9px !important; margin: 0 !important; line-height: 50px !important; white-space: nowrap !important; word-break: keep-all !important; float: none !important; } /* * Pastikan menu utama tidak menguasai seluruh lebar * dan tidak menabrak user navigation. */ #headerNavigationContainer #nav-menu .navbar-nav { display: flex !important; align-items: center !important; width: auto !important; max-width: calc(100% - 335px - 330px) !important; float: none !important; margin: 0 !important; padding: 0 !important; flex: 0 1 auto !important; white-space: nowrap !important; } #headerNavigationContainer #nav-menu .navbar-nav > li { flex: 0 0 auto !important; width: auto !important; } #headerNavigationContainer #nav-menu .navbar-nav > li > a { padding-left: 11px !important; padding-right: 11px !important; white-space: nowrap !important; } /* * Wrapper user navigation tidak boleh membuat baris * tambahan atau mengambil ruang layout. */ #headerNavigationContainer .pkp_navigation_user_wrapper, #headerNavigationContainer .navigation_user_wrapper, #headerNavigationContainer #navigationUserWrapper { position: static !important; width: auto !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { /* * HeaderNavigationContainer menjadi flex column. * * CHILD 2 = gambar + hamburger + menu utama * CHILD 1 = Register/Login * * Dengan order ini Register/Login muncul SETELAH * area menu utama, bukan di atas gambar. */ #headerNavigationContainer { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; } /* Main header: image + navigation */ #headerNavigationContainer > .container-fluid:nth-of-type(2) { order: 1 !important; position: relative !important; display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* * User navigation dipindahkan secara visual ke bawah * main navigation. */ #headerNavigationContainer > .container-fluid:first-child { order: 2 !important; position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: #48aee2 !important; border: 0 !important; pointer-events: auto !important; z-index: 30 !important; } /* * User navigation TIDAK lagi disembunyikan di mobile. */ #headerNavigationContainer > .container-fluid:first-child .pkp_navigation_user, #headerNavigationContainer > .container-fluid:first-child #navigationUser { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; white-space: normal !important; background: transparent !important; } #headerNavigationContainer > .container-fluid:first-child .pkp_navigation_user > li, #headerNavigationContainer > .container-fluid:first-child #navigationUser > li { display: block !important; width: 100% !important; height: auto !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; float: none !important; } #headerNavigationContainer > .container-fluid:first-child .pkp_navigation_user > li > a, #headerNavigationContainer > .container-fluid:first-child #navigationUser > li > a { display: block !important; width: 100% !important; height: auto !important; min-height: 44px !important; margin: 0 !important; padding: 12px 16px !important; box-sizing: border-box !important; line-height: 20px !important; white-space: nowrap !important; color: #fff !important; } /* * Wrapper user navigation juga harus kembali terlihat. */ #headerNavigationContainer > .container-fluid:first-child .pkp_navigation_user_wrapper, #headerNavigationContainer > .container-fluid:first-child .navigation_user_wrapper, #headerNavigationContainer > .container-fluid:first-child #navigationUserWrapper { position: static !important; display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; pointer-events: auto !important; background: transparent !important; border: 0 !important; } /* * Jika first container memiliki elemen lain yang tidak * berhubungan dengan user navigation, jangan biarkan * elemen tersebut membuat ruang kosong besar. */ #headerNavigationContainer > .container-fluid:first-child .container, #headerNavigationContainer > .container-fluid:first-child .row { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* * Main menu mobile tetap normal. */ #headerNavigationContainer #nav-menu { position: relative !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* * Hamburger tetap overlay di kanan atas gambar. */ #headerNavigationContainer .navbar-toggle { position: absolute !important; top: 10px !important; right: 10px !important; z-index: 10000 !important; } } /* ========================================================= V13 END ========================================================= */ /* ========================================================= V14 — MOBILE USER MENU INSIDE HAMBURGER FLOW - Register/Login tidak lagi menjadi bar terpisah - Saat hamburger tertutup: Register/Login benar-benar hidden - Saat hamburger terbuka: Register/Login muncul sebagai bagian lanjutan dari panel menu yang sama - Header image tetap full dan tidak bertambah tinggi ========================================================= */ @media (max-width: 767px) { /* ----------------------------------------------------- 1. FLATTEN DUA WRAPPER HEADER Agar user navigation dapat ikut dalam satu vertical flow dengan #nav-menu. ----------------------------------------------------- */ #headerNavigationContainer { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } #headerNavigationContainer > .container-fluid:first-child, #headerNavigationContainer > .container-fluid:nth-of-type(2) { display: contents !important; } /* ----------------------------------------------------- 2. IMAGE HARUS MENJADI ELEMEN PERTAMA ----------------------------------------------------- */ #headerNavigationContainer .site-name { order: 1 !important; position: relative !important; display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; } #headerNavigationContainer .navbar-brand.navbar-brand-logo { display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; line-height: 0 !important; background: transparent !important; border: 0 !important; } #headerNavigationContainer .navbar-brand.navbar-brand-logo img { display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; object-fit: contain !important; } /* ----------------------------------------------------- 3. HAMBURGER FLOATS DI ATAS GAMBAR navbar-header tidak boleh menciptakan tinggi. ----------------------------------------------------- */ #headerNavigationContainer .navbar-header { order: 2 !important; position: absolute !important; top: 0 !important; right: 0 !important; left: 0 !important; width: 100vw !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; background: transparent !important; border: 0 !important; z-index: 10000 !important; pointer-events: none !important; } #headerNavigationContainer .navbar-toggle { position: absolute !important; top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; display: block !important; width: 48px !important; height: 40px !important; margin: 0 !important; padding: 8px 10px !important; float: none !important; z-index: 10001 !important; pointer-events: auto !important; background: #198dcc !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 8px !important; box-shadow: 0 4px 14px rgba(0,0,0,.16) !important; } /* ----------------------------------------------------- 4. MAIN HAMBURGER MENU ----------------------------------------------------- */ #headerNavigationContainer #nav-menu { order: 3 !important; position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; overflow: visible !important; background: #48aee2 !important; } /* Closed: menu + user links do not occupy any space */ #headerNavigationContainer #nav-menu.collapse { display: none !important; } #headerNavigationContainer #nav-menu.collapse.in { display: block !important; width: 100% !important; height: auto !important; overflow: visible !important; } /* ----------------------------------------------------- 5. MAIN MENU ITEMS ----------------------------------------------------- */ #headerNavigationContainer #nav-menu .navbar-nav { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; } #headerNavigationContainer #nav-menu .navbar-nav > li { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; } #headerNavigationContainer #nav-menu .navbar-nav > li > a { display: block !important; width: 100% !important; height: auto !important; min-height: 48px !important; margin: 0 !important; padding: 13px 16px !important; box-sizing: border-box !important; line-height: 22px !important; white-space: nowrap !important; } /* ----------------------------------------------------- 6. SEARCH REMAINS PART OF SAME HAMBURGER PANEL ----------------------------------------------------- */ #headerNavigationContainer #nav-menu .pkp_search, #headerNavigationContainer #nav-menu .search { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 10px 12px !important; box-sizing: border-box !important; } #headerNavigationContainer #nav-menu .pkp_search input, #headerNavigationContainer #nav-menu .search input { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* ----------------------------------------------------- 7. REGISTER / LOGIN Default = HIDDEN. Hanya tampil ketika #nav-menu.collapse.in. ----------------------------------------------------- */ #headerNavigationContainer > .container-fluid:first-child .pkp_navigation_user, #headerNavigationContainer > .container-fluid:first-child #navigationUser { display: none !important; } #headerNavigationContainer > .container-fluid:first-child .pkp_navigation_user_wrapper, #headerNavigationContainer > .container-fluid:first-child .navigation_user_wrapper, #headerNavigationContainer > .container-fluid:first-child #navigationUserWrapper { display: none !important; } /* ----------------------------------------------------- 8. SHOW USER LINKS ONLY WHEN HAMBURGER IS OPEN :has() dipakai agar tidak perlu mengubah HTML/OJS. ----------------------------------------------------- */ #headerNavigationContainer:has(#nav-menu.collapse.in) > .container-fluid:first-child .pkp_navigation_user_wrapper, #headerNavigationContainer:has(#nav-menu.collapse.in) > .container-fluid:first-child .navigation_user_wrapper, #headerNavigationContainer:has(#nav-menu.collapse.in) > .container-fluid:first-child #navigationUserWrapper { display: block !important; position: static !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } #headerNavigationContainer:has(#nav-menu.collapse.in) > .container-fluid:first-child .pkp_navigation_user, #headerNavigationContainer:has(#nav-menu.collapse.in) > .container-fluid:first-child #navigationUser { display: block !important; position: static !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; background: #48aee2 !important; } #headerNavigationContainer:has(#nav-menu.collapse.in) > .container-fluid:first-child .pkp_navigation_user > li, #headerNavigationContainer:has(#nav-menu.collapse.in) > .container-fluid:first-child #navigationUser > li { display: block !important; width: 100% !important; height: auto !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; float: none !important; border-top: 1px solid rgba(255,255,255,.12) !important; } #headerNavigationContainer:has(#nav-menu.collapse.in) > .container-fluid:first-child .pkp_navigation_user > li > a, #headerNavigationContainer:has(#nav-menu.collapse.in) > .container-fluid:first-child #navigationUser > li > a { display: block !important; width: 100% !important; min-height: 48px !important; height: auto !important; margin: 0 !important; padding: 13px 16px !important; box-sizing: border-box !important; line-height: 22px !important; white-space: nowrap !important; color: #fff !important; background: transparent !important; } /* ----------------------------------------------------- 9. FIRST CONTAINER ITSELF MUST NOT CREATE A SEPARATE BLUE BAR WHEN MENU IS CLOSED. ----------------------------------------------------- */ #headerNavigationContainer > .container-fluid:first-child { order: 4 !important; position: static !important; width: 100% !important; max-width: 100% !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* When open, its contents are visible but wrapper remains dimensionless; no separate bar is generated. */ #headerNavigationContainer:has(#nav-menu.collapse.in) > .container-fluid:first-child { height: 0 !important; min-height: 0 !important; overflow: visible !important; pointer-events: none !important; } #headerNavigationContainer:has(#nav-menu.collapse.in) > .container-fluid:first-child .pkp_navigation_user_wrapper, #headerNavigationContainer:has(#nav-menu.collapse.in) > .container-fluid:first-child .navigation_user_wrapper, #headerNavigationContainer:has(#nav-menu.collapse.in) > .container-fluid:first-child #navigationUserWrapper, #headerNavigationContainer:has(#nav-menu.collapse.in) > .container-fluid:first-child .pkp_navigation_user, #headerNavigationContainer:has(#nav-menu.collapse.in) > .container-fluid:first-child #navigationUser { pointer-events: auto !important; } } /* ========================================================= V14 END ========================================================= */ /* ========================================================= V15 — MOBILE FINAL STRUCTURE FIX: 1. Header image tetap masuk normal document flow 2. Content tidak tertutup/terpotong oleh header 3. Register + Login tidak membuat bar terpisah 4. Register + Login muncul HANYA saat hamburger dibuka 5. Register + Login berada dalam panel hamburger ========================================================= */ @media (max-width: 767px) { /* ===================================================== A. HEADER UTAMA ===================================================== */ #headerNavigationContainer { position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* * Flatten wrapper Bootstrap agar: * HEADER → NAV MENU → USER MENU * dapat berada dalam satu vertical flow. */ #headerNavigationContainer > .container-fluid:first-child, #headerNavigationContainer > .container-fluid:nth-of-type(2) { display: contents !important; } /* ===================================================== B. HEADER IMAGE ===================================================== */ /* * SANGAT PENTING: * navbar-header TIDAK boleh absolute. * Karena image berada di dalam navbar-header, * absolute akan membuat tinggi image tidak dihitung * dan content naik menimpa image. */ #headerNavigationContainer .navbar-header { order: 1 !important; position: relative !important; display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; float: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; overflow: visible !important; z-index: 10 !important; } #headerNavigationContainer .site-name { position: relative !important; display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; float: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } #headerNavigationContainer .navbar-brand.navbar-brand-logo { position: relative !important; display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; float: none !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; background: transparent !important; border: 0 !important; } #headerNavigationContainer .navbar-brand.navbar-brand-logo img { display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; object-fit: contain !important; } /* ===================================================== C. HAMBURGER ===================================================== */ /* * Hanya tombol yang absolute. * Karena parent navbar-header tetap normal flow, * image tetap mengambil tinggi sebenarnya. */ #headerNavigationContainer .navbar-toggle { position: absolute !important; top: 10px !important; right: 10px !important; bottom: auto !important; left: auto !important; display: block !important; width: 48px !important; height: 40px !important; float: none !important; margin: 0 !important; padding: 8px 10px !important; box-sizing: border-box !important; z-index: 10000 !important; pointer-events: auto !important; background: #198dcc !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 8px !important; box-shadow: 0 4px 14px rgba(0,0,0,.16) !important; } #headerNavigationContainer .navbar-toggle .icon-bar { display: block !important; width: 24px !important; height: 3px !important; margin: 4px auto !important; background: #fff !important; border-radius: 2px !important; } /* ===================================================== D. MAIN HAMBURGER MENU ===================================================== */ #headerNavigationContainer #nav-menu { order: 2 !important; position: relative !important; display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; float: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: #48aee2 !important; } /* * CLOSED: * menu tidak mengambil ruang sama sekali. */ #headerNavigationContainer #nav-menu.collapse { display: none !important; } /* * OPEN: * menu menjadi panel penuh di bawah image. */ #headerNavigationContainer #nav-menu.collapse.in { display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; overflow: visible !important; } /* ===================================================== E. MENU ITEMS ===================================================== */ #headerNavigationContainer #nav-menu .navbar-nav { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; } #headerNavigationContainer #nav-menu .navbar-nav > li { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; } #headerNavigationContainer #nav-menu .navbar-nav > li > a { display: block !important; width: 100% !important; height: auto !important; min-height: 48px !important; margin: 0 !important; padding: 13px 16px !important; box-sizing: border-box !important; line-height: 22px !important; white-space: nowrap !important; } /* ===================================================== F. SEARCH ===================================================== */ #headerNavigationContainer #nav-menu .pkp_search, #headerNavigationContainer #nav-menu .search { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 10px 12px !important; box-sizing: border-box !important; } #headerNavigationContainer #nav-menu .pkp_search input, #headerNavigationContainer #nav-menu .search input { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* ===================================================== G. USER NAVIGATION Register / Login ===================================================== */ /* * Karena wrapper parent menggunakan display:contents, * user navigation dapat menjadi item setelah #nav-menu. */ #headerNavigationContainer .pkp_navigation_user_wrapper, #headerNavigationContainer .navigation_user_wrapper, #headerNavigationContainer #navigationUserWrapper { order: 3 !important; display: none !important; position: relative !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; background: #48aee2 !important; border: 0 !important; } /* * Saat hamburger terbuka: * wrapper user navigation menjadi bagian dari * panel hamburger. */ #headerNavigationContainer:has(#nav-menu.collapse.in) .pkp_navigation_user_wrapper, #headerNavigationContainer:has(#nav-menu.collapse.in) .navigation_user_wrapper, #headerNavigationContainer:has(#nav-menu.collapse.in) #navigationUserWrapper { display: block !important; } #headerNavigationContainer .pkp_navigation_user, #headerNavigationContainer #navigationUser { display: none !important; position: static !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; background: #48aee2 !important; white-space: normal !important; } #headerNavigationContainer:has(#nav-menu.collapse.in) .pkp_navigation_user, #headerNavigationContainer:has(#nav-menu.collapse.in) #navigationUser { display: block !important; } /* ===================================================== H. REGISTER / LOGIN ITEM STYLE ===================================================== */ #headerNavigationContainer .pkp_navigation_user > li, #headerNavigationContainer #navigationUser > li { display: block !important; width: 100% !important; height: auto !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; float: none !important; border-top: 1px solid rgba(255,255,255,.14) !important; } #headerNavigationContainer .pkp_navigation_user > li > a, #headerNavigationContainer #navigationUser > li > a { display: block !important; width: 100% !important; height: auto !important; min-height: 48px !important; margin: 0 !important; padding: 13px 16px !important; box-sizing: border-box !important; line-height: 22px !important; white-space: nowrap !important; color: #fff !important; background: transparent !important; } /* ===================================================== I. FIRST CONTAINER — DO NOT CREATE EXTRA BAR ===================================================== */ #headerNavigationContainer > .container-fluid:first-child { height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* ===================================================== J. CONTENT SAFETY ===================================================== */ .pkp_structure_page, .pkp_structure_content, .pkp_structure_main, .pkp_structure_sidebar { position: relative !important; top: auto !important; max-width: 100% !important; box-sizing: border-box !important; } } /* ========================================================= V15 END ========================================================= */ /* ========================================================= V16 — MOBILE MENU ORDER IMAGE → MAIN MENU → REGISTER/LOGIN → SEARCH Register/Login hanya tampil ketika hamburger terbuka. ========================================================= */ @media (max-width: 767px) { #headerNavigationContainer { display:flex !important; flex-direction:column !important; align-items:stretch !important; width:100vw !important; max-width:100vw !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:visible !important; } /* Flatten the two Bootstrap containers so their children can be ordered together in one mobile navigation flow. */ #headerNavigationContainer > .container-fluid:first-child, #headerNavigationContainer > .container-fluid:nth-of-type(2) { display:contents !important; } /* Header image always comes first and remains in normal flow. */ #headerNavigationContainer .navbar-header { order:1 !important; position:relative !important; display:block !important; width:100vw !important; max-width:100vw !important; height:auto !important; min-height:0 !important; float:none !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; overflow:visible !important; z-index:10 !important; } #headerNavigationContainer .site-name, #headerNavigationContainer .navbar-brand.navbar-brand-logo { position:relative !important; display:block !important; width:100vw !important; max-width:100vw !important; height:auto !important; min-height:0 !important; float:none !important; margin:0 !important; padding:0 !important; line-height:0 !important; background:transparent !important; border:0 !important; } #headerNavigationContainer .navbar-brand.navbar-brand-logo img { display:block !important; width:100vw !important; max-width:100vw !important; height:auto !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; object-fit:contain !important; } /* Hamburger overlays the image without removing image height. */ #headerNavigationContainer .navbar-toggle { position:absolute !important; top:10px !important; right:10px !important; left:auto !important; bottom:auto !important; display:block !important; float:none !important; width:48px !important; height:40px !important; margin:0 !important; padding:8px 10px !important; box-sizing:border-box !important; z-index:10000 !important; pointer-events:auto !important; background:#198dcc !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:8px !important; box-shadow:0 4px 14px rgba(0,0,0,.16) !important; } /* CLOSED: only image is visible. */ #headerNavigationContainer #nav-menu.collapse { display:none !important; } /* OPEN: nav-menu itself becomes transparent to layout so navbar-nav, user navigation and search can be ordered as siblings. */ #headerNavigationContainer #nav-menu.collapse.in { display:contents !important; } /* Main navigation: first block after image. */ #headerNavigationContainer #nav-menu .navbar-nav { order:2 !important; display:block !important; width:100vw !important; max-width:100vw !important; margin:0 !important; padding:0 !important; float:none !important; background:#48aee2 !important; } #headerNavigationContainer #nav-menu .navbar-nav > li { display:block !important; width:100% !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; float:none !important; } #headerNavigationContainer #nav-menu .navbar-nav > li > a { display:block !important; width:100% !important; min-height:48px !important; height:auto !important; margin:0 !important; padding:13px 16px !important; box-sizing:border-box !important; line-height:22px !important; white-space:nowrap !important; } /* Register/Login: exactly after About, before Search. */ #headerNavigationContainer .pkp_navigation_user_wrapper, #headerNavigationContainer .navigation_user_wrapper, #headerNavigationContainer #navigationUserWrapper { order:3 !important; display:none !important; position:relative !important; width:100vw !important; max-width:100vw !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; float:none !important; background:#48aee2 !important; border:0 !important; } #headerNavigationContainer:has(#nav-menu.collapse.in) .pkp_navigation_user_wrapper, #headerNavigationContainer:has(#nav-menu.collapse.in) .navigation_user_wrapper, #headerNavigationContainer:has(#nav-menu.collapse.in) #navigationUserWrapper { display:block !important; } #headerNavigationContainer .pkp_navigation_user, #headerNavigationContainer #navigationUser { display:block !important; position:static !important; width:100vw !important; max-width:100vw !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; float:none !important; background:#48aee2 !important; white-space:normal !important; } #headerNavigationContainer .pkp_navigation_user > li, #headerNavigationContainer #navigationUser > li { display:block !important; width:100% !important; height:auto !important; min-height:48px !important; margin:0 !important; padding:0 !important; float:none !important; border-top:1px solid rgba(255,255,255,.14) !important; } #headerNavigationContainer .pkp_navigation_user > li > a, #headerNavigationContainer #navigationUser > li > a { display:block !important; width:100% !important; min-height:48px !important; height:auto !important; margin:0 !important; padding:13px 16px !important; box-sizing:border-box !important; line-height:22px !important; white-space:nowrap !important; color:#fff !important; background:transparent !important; } /* Search is deliberately LAST. */ #headerNavigationContainer #nav-menu .pkp_search, #headerNavigationContainer #nav-menu .search { order:4 !important; display:block !important; width:100vw !important; max-width:100vw !important; height:auto !important; margin:0 !important; padding:10px 12px !important; box-sizing:border-box !important; background:#48aee2 !important; } #headerNavigationContainer #nav-menu .pkp_search input, #headerNavigationContainer #nav-menu .search input { display:block !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; } /* Prevent any legacy first-container styling from creating a blue strip above the image. */ #headerNavigationContainer > .container-fluid:first-child { height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; } /* Content begins after the complete header/menu flow. */ .pkp_structure_page, .pkp_structure_content, .pkp_structure_main, .pkp_structure_sidebar { position:relative !important; top:auto !important; max-width:100% !important; box-sizing:border-box !important; } } /* V16 END */ /* ========================================================= V17 — MOBILE EXPLICIT GRID ORDER MOBILE TARGET: 1. HEADER IMAGE 2. HOME 3. CURRENT 4. ARCHIVES 5. ANNOUNCEMENTS 6. ABOUT 7. REGISTER 8. LOGIN 9. SEARCH CLOSED: HEADER IMAGE only OPEN: HEADER IMAGE └─ all navigation items in ONE panel ========================================================= */ @media (max-width: 767px) { /* ----------------------------------------------------- ROOT HEADER = explicit mobile grid ----------------------------------------------------- */ #headerNavigationContainer { position: relative !important; display: grid !important; grid-template-columns: 100vw !important; grid-auto-rows: auto !important; align-items: start !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* * Remove the two Bootstrap wrappers from the visual * hierarchy so their useful children can participate * directly in the grid above. */ #headerNavigationContainer > .container-fluid:first-child, #headerNavigationContainer > .container-fluid:nth-of-type(2) { display: contents !important; } /* ----------------------------------------------------- ROW 1 — HEADER IMAGE ----------------------------------------------------- */ #headerNavigationContainer .navbar-header { grid-column: 1 !important; grid-row: 1 !important; position: relative !important; display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; float: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; overflow: visible !important; z-index: 10 !important; } #headerNavigationContainer .site-name { display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; float: none !important; margin: 0 !important; padding: 0 !important; } #headerNavigationContainer .navbar-brand.navbar-brand-logo { display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; float: none !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; background: transparent !important; border: 0 !important; } #headerNavigationContainer .navbar-brand.navbar-brand-logo img { display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; object-fit: contain !important; } /* ----------------------------------------------------- HAMBURGER — overlay only, does not affect flow ----------------------------------------------------- */ #headerNavigationContainer .navbar-toggle { position: absolute !important; top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; display: block !important; width: 48px !important; height: 40px !important; margin: 0 !important; padding: 8px 10px !important; float: none !important; box-sizing: border-box !important; z-index: 10000 !important; pointer-events: auto !important; background: #198dcc !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 8px !important; box-shadow: 0 4px 14px rgba(0,0,0,.16) !important; } #headerNavigationContainer .navbar-toggle .icon-bar { display: block !important; width: 24px !important; height: 3px !important; margin: 4px auto !important; background: #fff !important; border-radius: 2px !important; } /* ----------------------------------------------------- CLOSED STATE ----------------------------------------------------- */ #headerNavigationContainer #nav-menu.collapse { display: none !important; } /* * User navigation is also hidden while hamburger * is closed, so it cannot create any blue area. */ #headerNavigationContainer .pkp_navigation_user_wrapper, #headerNavigationContainer .navigation_user_wrapper, #headerNavigationContainer #navigationUserWrapper { display: none !important; } /* ----------------------------------------------------- OPEN STATE ----------------------------------------------------- */ /* * When open, nav-menu becomes transparent to the grid. * Its navbar-nav and search become grid items. */ #headerNavigationContainer #nav-menu.collapse.in { display: contents !important; } /* ----------------------------------------------------- ROW 2 — MAIN NAVIGATION ----------------------------------------------------- */ #headerNavigationContainer #nav-menu .navbar-nav { grid-column: 1 !important; grid-row: 2 !important; display: block !important; width: 100vw !important; max-width: 100vw !important; float: none !important; margin: 0 !important; padding: 0 !important; background: #48aee2 !important; } #headerNavigationContainer #nav-menu .navbar-nav > li { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; } #headerNavigationContainer #nav-menu .navbar-nav > li > a { display: block !important; width: 100% !important; min-height: 48px !important; height: auto !important; margin: 0 !important; padding: 13px 16px !important; box-sizing: border-box !important; line-height: 22px !important; white-space: nowrap !important; background: transparent !important; } /* ----------------------------------------------------- ROW 3 — REGISTER + LOGIN ----------------------------------------------------- */ #headerNavigationContainer .pkp_navigation_user_wrapper, #headerNavigationContainer .navigation_user_wrapper, #headerNavigationContainer #navigationUserWrapper { grid-column: 1 !important; grid-row: 3 !important; position: relative !important; display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; background: #48aee2 !important; border: 0 !important; z-index: 30 !important; } #headerNavigationContainer .pkp_navigation_user, #headerNavigationContainer #navigationUser { position: static !important; display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; background: #48aee2 !important; white-space: normal !important; } #headerNavigationContainer .pkp_navigation_user > li, #headerNavigationContainer #navigationUser > li { display: block !important; width: 100% !important; height: auto !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; float: none !important; border-top: 1px solid rgba(255,255,255,.14) !important; } #headerNavigationContainer .pkp_navigation_user > li > a, #headerNavigationContainer #navigationUser > li > a { display: block !important; width: 100% !important; height: auto !important; min-height: 48px !important; margin: 0 !important; padding: 13px 16px !important; box-sizing: border-box !important; line-height: 22px !important; white-space: nowrap !important; color: #fff !important; background: transparent !important; } /* ----------------------------------------------------- ROW 4 — SEARCH ----------------------------------------------------- */ #headerNavigationContainer #nav-menu .pkp_search, #headerNavigationContainer #nav-menu .search { grid-column: 1 !important; grid-row: 4 !important; display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; margin: 0 !important; padding: 10px 12px !important; box-sizing: border-box !important; background: #48aee2 !important; } #headerNavigationContainer #nav-menu .pkp_search input, #headerNavigationContainer #nav-menu .search input { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* ----------------------------------------------------- CONTENT — starts after the complete header ----------------------------------------------------- */ .pkp_structure_page, .pkp_structure_content, .pkp_structure_main, .pkp_structure_sidebar { position: relative !important; top: auto !important; max-width: 100% !important; box-sizing: border-box !important; } } /* ========================================================= V17 END ========================================================= */ /* ========================================================= V18 — USER DROPDOWN / ADMIN MENU CONTRAST FIX FIX: - Dropdown user/admin tidak transparan - Text dropdown terbaca jelas - Background solid - Hover tetap terbaca - Tidak mengubah header image / hamburger / main nav ========================================================= */ /* --------------------------------------------------------- USER DROPDOWN — ALL VIEWPORTS --------------------------------------------------------- */ #headerNavigationContainer .pkp_navigation_user .dropdown-menu, #headerNavigationContainer #navigationUser .dropdown-menu, #headerNavigationContainer .dropdown-menu { background: #ffffff !important; background-color: #ffffff !important; opacity: 1 !important; border: 1px solid rgba(15,23,42,.16) !important; border-radius: 0 0 8px 8px !important; box-shadow: 0 8px 24px rgba(15,23,42,.18) !important; z-index: 99999 !important; overflow: hidden !important; } /* Dropdown item */ #headerNavigationContainer .pkp_navigation_user .dropdown-menu > li > a, #headerNavigationContainer #navigationUser .dropdown-menu > li > a, #headerNavigationContainer .dropdown-menu > li > a { display: block !important; background: #ffffff !important; background-color: #ffffff !important; color: #172033 !important; opacity: 1 !important; padding: 10px 16px !important; line-height: 22px !important; white-space: nowrap !important; text-decoration: none !important; } /* Hover / focus */ #headerNavigationContainer .pkp_navigation_user .dropdown-menu > li > a:hover, #headerNavigationContainer .pkp_navigation_user .dropdown-menu > li > a:focus, #headerNavigationContainer #navigationUser .dropdown-menu > li > a:hover, #headerNavigationContainer #navigationUser .dropdown-menu > li > a:focus, #headerNavigationContainer .dropdown-menu > li > a:hover, #headerNavigationContainer .dropdown-menu > li > a:focus { background: #f1f5f9 !important; background-color: #f1f5f9 !important; color: #0f172a !important; } /* Divider */ #headerNavigationContainer .dropdown-menu .divider { height: 1px !important; margin: 4px 0 !important; background: #e2e8f0 !important; border: 0 !important; } /* Dropdown text / badges */ #headerNavigationContainer .dropdown-menu span, #headerNavigationContainer .dropdown-menu strong, #headerNavigationContainer .dropdown-menu small { color: #172033 !important; } /* --------------------------------------------------------- MOBILE USER DROPDOWN Keep it readable when the user menu is opened. --------------------------------------------------------- */ @media (max-width: 767px) { #headerNavigationContainer .pkp_navigation_user .dropdown-menu, #headerNavigationContainer #navigationUser .dropdown-menu, #headerNavigationContainer .dropdown-menu { position: static !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; background-color: #ffffff !important; border: 1px solid #dbe2ea !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; } #headerNavigationContainer .pkp_navigation_user .dropdown-menu > li > a, #headerNavigationContainer #navigationUser .dropdown-menu > li > a, #headerNavigationContainer .dropdown-menu > li > a { min-height: 44px !important; padding: 11px 20px !important; background: #ffffff !important; background-color: #ffffff !important; color: #172033 !important; line-height: 22px !important; } #headerNavigationContainer .pkp_navigation_user .dropdown-menu > li > a:hover, #headerNavigationContainer .pkp_navigation_user .dropdown-menu > li > a:focus, #headerNavigationContainer #navigationUser .dropdown-menu > li > a:hover, #headerNavigationContainer #navigationUser .dropdown-menu > li > a:focus, #headerNavigationContainer .dropdown-menu > li > a:hover, #headerNavigationContainer .dropdown-menu > li > a:focus { background: #f1f5f9 !important; color: #0f172a !important; } } /* ========================================================= V18 END ========================================================= */ /* ========================================================= V19 — HIDE PKP / OJS BRANDING IN FOOTER ========================================================= */ /* * Hide the PKP/OJS footer branding only. * Other footer content remains untouched. */ .pkp_brand_footer, .pkp_footer_content .pkp_brand_footer, footer .pkp_brand_footer, .pkp_footer .pkp_brand_footer { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* If the branding wrapper itself remains empty, remove its visual spacing as well. */ .pkp_footer .pkp_brand_footer + *, .pkp_footer_content .pkp_brand_footer + * { margin-top: 0 !important; } /* ========================================================= V19 END ========================================================= */ /* ========================================================= V20 — FORCE REMOVE OJS / PKP FOOTER LOGO The previous selector was too narrow for this theme. This version targets the actual branding link/image as well as the standard PKP wrapper. ========================================================= */ /* Standard PKP branding wrapper */ footer .pkp_brand_footer, footer .pkp_brand_footer *, .pkp_brand_footer, .pkp_brand_footer * { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* PKP/OJS branding link */ footer a[href*="pkp.sfu.ca"], footer a[href*="pkp"], footer a[href*="openjournalsystems"] { display: none !important; visibility: hidden !important; opacity: 0 !important; } /* OJS/PKP branding images — handles themes that omit the .pkp_brand_footer class */ footer img[src*="ojs"], footer img[src*="OJS"], footer img[src*="pkp"], footer img[src*="PKP"], footer img[alt*="OJS"], footer img[alt*="PKP"], footer img[title*="OJS"], footer img[title*="PKP"] { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; max-width: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Remove empty branding containers commonly used by OJS */ footer .pkp_brand_footer, footer .pkp_brand_footer:empty { width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Modern browsers: if the logo is wrapped in a link but does not expose the standard PKP class */ @supports selector(:has(*)) { footer a:has(img[src*="ojs"]), footer a:has(img[src*="OJS"]), footer a:has(img[src*="pkp"]), footer a:has(img[src*="PKP"]), footer a:has(img[alt*="OJS"]), footer a:has(img[alt*="PKP"]) { display: none !important; visibility: hidden !important; opacity: 0 !important; } } /* ========================================================= V20 END ========================================================= */ /* ========================================================= V21 — FLOATING / POP-UP SHADOW Header bottom + Footer top ========================================================= */ /* Header — soft elevated shadow below the header */ #headerNavigationContainer { position: relative !important; z-index: 1000 !important; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.10) !important; overflow: visible !important; } /* Footer — soft elevated shadow above the footer */ footer { position: relative !important; z-index: 10 !important; box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.14), 0 -2px 6px rgba(15, 23, 42, 0.10) !important; overflow: visible !important; } /* ========================================================= V21 END ========================================================= */ /* ========================================================= V22 — SOFT AURORA GRADIENT FOR GR JOURNAL MENU BUTTONS Based on the supplied GRHRM source code ========================================================= */ /* Default state remains exactly as defined in the source. Hover / focus / active states receive a soft Aurora gradient. !important is required because the source uses inline styles. */ .gr-journal-menu .gr-menu-button { transition: background .28s ease, box-shadow .28s ease, color .28s ease, transform .20s ease !important; } /* --------------------------------------------------------- HOVER --------------------------------------------------------- */ .gr-journal-menu .gr-menu-button:hover { background: radial-gradient(circle at 12% 20%, rgba(87, 211, 196, .34) 0%, transparent 42%), radial-gradient(circle at 86% 18%, rgba(126, 156, 255, .30) 0%, transparent 44%), radial-gradient(circle at 68% 92%, rgba(102, 211, 230, .28) 0%, transparent 48%), linear-gradient(135deg, #eefcf9 0%, #f2f6ff 52%, #eefbfc 100%) !important; color: #24485a !important; box-shadow: 0 7px 20px rgba(43, 116, 137, .13), 0 2px 7px rgba(74, 96, 160, .08) !important; transform: translateY(-1px) !important; } /* --------------------------------------------------------- ICON HOVER --------------------------------------------------------- */ .gr-journal-menu .gr-menu-button:hover > span:first-child { color: #287f8b !important; } /* --------------------------------------------------------- LINK HOVER --------------------------------------------------------- */ .gr-journal-menu .gr-menu-button:hover a, .gr-journal-menu .gr-menu-button:hover a span { color: #234b5c !important; } /* --------------------------------------------------------- CLICK / ACTIVE The effect appears while the button is being clicked. --------------------------------------------------------- */ .gr-journal-menu .gr-menu-button:active { background: radial-gradient(circle at 18% 22%, rgba(72, 201, 183, .40) 0%, transparent 40%), radial-gradient(circle at 82% 18%, rgba(105, 133, 238, .36) 0%, transparent 43%), radial-gradient(circle at 68% 88%, rgba(74, 188, 216, .34) 0%, transparent 48%), linear-gradient(135deg, #e8faf6 0%, #edf2ff 50%, #e8f9fb 100%) !important; box-shadow: 0 4px 12px rgba(43, 116, 137, .16), inset 0 1px 0 rgba(255,255,255,.72) !important; transform: translateY(0) scale(.995) !important; } /* --------------------------------------------------------- FOCUS Keeps the Aurora appearance briefly after keyboard/mouse interaction, without creating a hard outline. --------------------------------------------------------- */ .gr-journal-menu .gr-menu-button:focus, .gr-journal-menu .gr-menu-button:focus-within { background: radial-gradient(circle at 12% 20%, rgba(87, 211, 196, .30) 0%, transparent 42%), radial-gradient(circle at 86% 15%, rgba(126, 156, 255, .28) 0%, transparent 44%), radial-gradient(circle at 70% 90%, rgba(102, 211, 230, .26) 0%, transparent 48%), linear-gradient(135deg, #eefcf9 0%, #f2f6ff 52%, #eefbfc 100%) !important; color: #24485a !important; box-shadow: 0 7px 20px rgba(43, 116, 137, .12), 0 2px 7px rgba(74, 96, 160, .07) !important; outline: none !important; } /* Keep icon/link colors coordinated while focused */ .gr-journal-menu .gr-menu-button:focus-within > span:first-child { color: #287f8b !important; } .gr-journal-menu .gr-menu-button:focus-within a, .gr-journal-menu .gr-menu-button:focus-within a span { color: #234b5c !important; } /* --------------------------------------------------------- KEYBOARD ACCESSIBILITY A very soft Aurora ring instead of a hard outline. --------------------------------------------------------- */ .gr-journal-menu .gr-menu-button:focus-visible { outline: none !important; box-shadow: 0 0 0 2px rgba(105, 184, 206, .18), 0 7px 20px rgba(43, 116, 137, .12) !important; } /* --------------------------------------------------------- MOBILE — same Aurora behavior, no layout changes --------------------------------------------------------- */ @media (max-width: 767px) { .gr-journal-menu .gr-menu-button:hover { transform: none !important; } .gr-journal-menu .gr-menu-button:active { transform: scale(.995) !important; } } /* ========================================================= END V22 AURORA BUTTONS ========================================================= */