(mobile). Hide the body-level copy on desktop — the topbar already carries the full breadcrumb chain there. The mobile media query below promotes display back to block. */ .dmu-mobile-breadcrumbs { display: none; } /* ─── Mobile activation ─────────── */ @media (max-width: 991.98px) { /* Promote the layout variables so KB/memos floating toolbars and any future bottom-anchored page chrome can offset above the bar. --dmu-bottom-nav-clearance derives from these via the unconditional :root definition above; no explicit override needed here. */ :root { --dmu-bottom-nav-height: 64px; --dmu-bottom-nav-gap: 20px; } .dmu-bottom-nav { display: flex; } /* ─── Bottom-nav clearance ─────────── Interacts with: css/layout/header.css:91-94 (.container padding-bottom: 0 !important). See templates/layout/bottom-nav.php for context. The whole document scrolls as one (no element on the page declares overflow-y). The .container rule above zeroes its own bottom padding so

's min-height: calc(100vh - 65px) sets the layout floor; any padding we'd add to .container would be overridden. We add the bar's clearance to instead — body has no existing padding rule, so this is purely additive. Clearance is consolidated into --dmu-bottom-nav-clearance (defined on :root above) so this rule and mail.css's full-height mobile wrap both consume the same expression. */ body { padding-bottom: var(--dmu-bottom-nav-clearance); } /* ─── Hide chrome that the bar replaces ─────────── */ /* Topbar hamburger — superseded by the bar's Menu tab. It currently has d-block d-lg-none (visible on mobile); this rule wins via specificity + !important. */ #sidebar-mobile-toggle { display: none !important; } /* Floating chat launcher — chat is now invoked from the bar. The launcher button is still in the DOM (so bottom-nav.js can programmatically click it), only its visibility is suppressed. */ .chat-launcher { display: none !important; } /* Topbar right-side action buttons that the bar duplicates. - Notifications: only button targeting #notifications-modal - Time tracker: only button with id #dmuTimeBtn - Mail link: stable .topbar-mail-link class on the in menu/menu.php (was .topbar-right > a; switched so adding any future to .topbar-right doesn't silently get hidden too) - Divider: cosmetic separator before the profile - Profile: avatar + dropdown */ #topbar [data-bs-target="#notifications-modal"], #topbar #dmuTimeBtn, #topbar .topbar-mail-link, #topbar .topbar-divider, #topbar .topbar-profile { display: none !important; } /* Trim the now-empty gap on the right side of the topbar so page-presence avatars (the only remaining right-side item) don't sit alone with extra padding. */ #topbar .topbar-right { gap: 0; } /* ─── Hide bar while mail folder drawer is open ─────────── Drawer (.dmu-mail-col-inboxes.is-mobile-active) sits at z:1040, below the bar's z:1045 — without this hide, the bar floats above the drawer's bottom edge and cuts off the folder list. Detect drawer-open via :has() since the toggle class lives on the drawer element, not body. :has() precedent already in this file at the .dmu-mobile-breadcrumbs:not(:has(...)) rule below. */ body:has(.dmu-mail-col-inboxes.is-mobile-active) .dmu-bottom-nav { display: none; } /* ─── Hide mobile topbar ─────────── The bottom nav and the in-page mobile breadcrumb take over the topbar's responsibilities on mobile. The element stays in the DOM (display:none, not removal) so JS that depends on it still works: - js/modules/mail/init.js reparents #mailSearchContainer in/out - js/base/page-presence.js reads/writes #dmu-page-presence Other rules above this point in the same media query (notifications button, mail link, profile, etc.) become redundant once #topbar itself is hidden, but they're harmless and document intent. */ #topbar { display: none !important; } /* ─── Hide page-presence avatars ─────────── Container hidden via CSS only. js/base/page-presence.js keeps fetching so the body-level concurrent-edit warning banner (#dmu-presence-banner) still appears on edit URLs. The avatars are out-of-scope on mobile until further design work. */ #dmu-page-presence { display: none !important; } /* ─── Promote #dmu-tabs to the very top ─────────── On desktop: top:65px (clears the topbar). On mobile: topbar is gone, so tabs sit at top:0 and become the user's only fixed chrome above the content. position:fixed is already set on desktop (css/layout/tabs.css:13-26) and carries over since the mobile media query in tabs.css only redefines left and z-index. */ #dmu-tabs { top: 0 !important; } /* ───

top margin reset ─────────── Desktop sets `main { margin-top: 65px }` unconditionally (css/layout/header.css:419-431) to clear the 65px topbar. On mobile the topbar is hidden, so

needs no top margin. When SPA tabs are visible, the in-page mobile breadcrumb (between the fixed tabs bar and

) provides the clearance — see the .dmu-mobile-breadcrumbs rules below. */ main { margin-top: 0 !important; } /* ─── In-page mobile breadcrumb (mobile show) ─────────── Wrapper rendered by menu/menu.php as a body-level sibling between #topbar and

. Sits in document flow (not sticky), scrolls with the page. */ .dmu-mobile-breadcrumbs { display: block; padding: 12px 16px; background: var(--dmu-topbar-bg); border-bottom: 1px solid var(--dmu-topbar-border); font-size: 13px; } /* ─── Empty-wrapper collapse ─────────── The wrapper always renders (so the SPA loader can swap its contents on navigation, mirroring #dmu-page-actions). Hide it when it has no breadcrumb chain inside — pages without $_PAGE['hero']['bread'] would otherwise leave a 12px-padding + 1px-border empty bar visible above content. */ .dmu-mobile-breadcrumbs:not(:has(.dmu-bc-root)) { display: none; } /* ─── Mobile breadcrumb clearance for fixed #dmu-tabs ─────────── #dmu-mobile-breadcrumbs is a body-level sibling rendered before

. When tabs are visible they overlay the top of the viewport (#dmu-tabs is position:fixed top:0); push the breadcrumb down by the tabs height so it isn't covered. Tabs hidden (default): no clearance — breadcrumb sits at the actual top of the document. */ body.dmu-tabs-visible .dmu-mobile-breadcrumbs { margin-top: var(--dmu-tabs-h); } }