/* ============================================================ FIX: Mobile header logo disappears + nav shifts right Upload to: public/assets/css/mobile-header-fix.css Then add this line inside your layout blade section: ============================================================ */ @media (max-width: 991.98px) { /* Force the header nav container to stack vertically on mobile, regardless of any JS that tries to set it to flex row */ .aiz-header .aiz-navbar .container > div, .aiz-header .aiz-navbar .container > .d-lg-flex { display: flex !important; flex-direction: column !important; align-items: center !important; } /* Keep logo always visible and give it a defined space */ .aiz-header .logo { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; text-align: center !important; flex-shrink: 0 !important; } .aiz-header .logo a, .aiz-header .logo img { display: inline-block !important; visibility: visible !important; opacity: 1 !important; } /* Nav strip stays below logo, full width, scrollable */ .aiz-header .mobile-hor-swipe { width: 100% !important; flex-shrink: 0 !important; margin-left: 0 !important; } }