/* ========================================================== JSRM COMMON NAVIGATION MASTER NAVIGATION FOR OJS + STATIC PAGES ========================================================== */ /* ------------------------------ NAV BAR ------------------------------ */ #headerNavigationContainer[data-jsrm-header="final-v2"] .pkp_site_nav_menu, .sv-nav { position: relative !important; z-index: 50000 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #07366f !important; overflow: visible !important; } /* ------------------------------ INNER CONTAINER ------------------------------ */ #headerNavigationContainer[data-jsrm-header="final-v2"] .pkp_navigation_primary_wrapper, .sv-nav-inner { position: relative !important; display: flex !important; align-items: stretch !important; width: min(1440px,94vw) !important; max-width: 1440px !important; min-height: 72px !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; } /* ------------------------------ PRIMARY MENU ------------------------------ */ #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-primary-menu, .sv-primary-menu { display: flex !important; align-items: stretch !important; flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; list-style: none !important; overflow: visible !important; } /* ------------------------------ TOP-LEVEL ITEMS ------------------------------ */ #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-primary-menu > li, .sv-primary-menu > li { position: relative !important; display: flex !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; } /* ------------------------------ TOP-LEVEL LINKS ------------------------------ */ #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-primary-menu > li > a, #headerNavigationContainer[data-jsrm-header="final-v2"] .pkp_search_desktop, .sv-primary-menu > li > a, .sv-search { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 72px !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 14px !important; color: #ffffff !important; background: transparent !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap !important; } #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-primary-menu > li > a:hover, #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-primary-menu > li > a:focus, .sv-primary-menu > li > a:hover, .sv-primary-menu > li > a:focus, .sv-search:hover, .sv-search:focus { color: #ffffff !important; background: rgba(255,255,255,.09) !important; } .sv-search { margin-left: auto !important; } /* ------------------------------ ONE ARROW ONLY ------------------------------ */ /* OJS already has real span arrow */ #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-nav-arrow { display: inline-block !important; margin-left: 5px !important; font-size: 9px !important; font-weight: 400 !important; line-height: 1 !important; opacity: .9 !important; } /* Prevent OJS pseudo arrows */ #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-has-submenu > a::after { content: none !important; display: none !important; } /* Static pages receive exactly one CSS arrow */ .sv-has-submenu > a::after { content: "▾" !important; display: inline-block !important; margin-left: 5px !important; color: #ffffff !important; font-size: 9px !important; font-weight: 400 !important; line-height: 1 !important; opacity: .9 !important; } /* ------------------------------ DROPDOWN SHELL ------------------------------ */ #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-submenu, .sv-submenu { position: absolute !important; top: 100% !important; left: 0 !important; right: auto !important; display: none !important; box-sizing: border-box !important; width: 280px !important; min-width: 280px !important; max-width: 280px !important; height: auto !important; min-height: 0 !important; max-height: 470px !important; margin: 0 !important; padding: 7px 0 !important; overflow-x: hidden !important; overflow-y: auto !important; list-style: none !important; background: #ffffff !important; border: 1px solid #dbe5ee !important; border-top: 3px solid #d6a42c !important; border-radius: 0 0 5px 5px !important; box-shadow: 0 14px 30px rgba(8,47,87,.18) !important; z-index: 999999 !important; } /* ------------------------------ OPEN DROPDOWN ------------------------------ */ #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-has-submenu:hover > .jsrm-submenu, #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-has-submenu:focus-within > .jsrm-submenu, .sv-has-submenu:hover > .sv-submenu, .sv-has-submenu:focus-within > .sv-submenu { display: block !important; } /* ------------------------------ DROPDOWN ITEMS ------------------------------ */ #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-submenu > li, .sv-submenu > li { position: static !important; display: block !important; box-sizing: border-box !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* ------------------------------ DROPDOWN LINKS ------------------------------ */ #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-submenu > li > a, .sv-submenu > li > a { position: static !important; display: block !important; box-sizing: border-box !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 10px 13px !important; color: #0872b9 !important; background: #ffffff !important; border: 0 !important; font-size: 13px !important; font-weight: 400 !important; font-family: inherit !important; line-height: 1.35 !important; letter-spacing: normal !important; text-align: left !important; text-decoration: none !important; text-transform: none !important; white-space: normal !important; } /* ------------------------------ DROPDOWN HOVER ------------------------------ */ #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-submenu > li > a:hover, #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-submenu > li > a:focus, .sv-submenu > li > a:hover, .sv-submenu > li > a:focus { color: #006798 !important; background: #edf5fb !important; } /* Never generate arrows inside dropdown */ #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-submenu a::before, #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-submenu a::after, .sv-submenu a::before, .sv-submenu a::after { content: none !important; display: none !important; } /* ------------------------------ MOBILE ------------------------------ */ @media (max-width:780px) { .sv-nav-inner { display: block !important; width: 100% !important; } .sv-primary-menu { display: block !important; width: 100% !important; } .sv-primary-menu > li { display: block !important; width: 100% !important; } .sv-primary-menu > li > a, .sv-search { justify-content: flex-start !important; width: 100% !important; min-height: auto !important; padding: 12px 18px !important; } .sv-search { margin-left: 0 !important; } .sv-submenu { position: static !important; display: block !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; max-height: none !important; padding: 0 0 5px 18px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #062d5d !important; } .sv-submenu > li > a { color: #dceafb !important; background: transparent !important; padding: 8px 14px !important; } } /* ========================================================== END JSRM COMMON NAVIGATION ========================================================== */ /* JSRM OJS DROPDOWN ANCHOR ROOT FIX START */ /* * Native OJS still inherits legacy PKP navigation sizing. * Give the dropdown parent an explicit geometry so top * cannot be calculated from an oversized flex item. */ #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-primary-menu { align-items: flex-start !important; flex-wrap: nowrap !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; } #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-primary-menu > li { position: relative !important; align-self: flex-start !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; margin: 0 !important; padding: 0 !important; } #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-primary-menu > li > a { box-sizing: border-box !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; } /* Exact dropdown anchor: directly below 72px nav row */ #headerNavigationContainer[data-jsrm-header="final-v2"] .jsrm-primary-menu > .jsrm-has-submenu > .jsrm-submenu { top: 72px !important; bottom: auto !important; margin-top: 0 !important; transform: none !important; } /* JSRM OJS DROPDOWN ANCHOR ROOT FIX END */