Mobile Overlay Header: Implementation Guide

On desktop (1200px and wider) the header bar is a normal, always-visible block element. It sits in the document flow and pushes page content down below it.

On mobile (under 1200px) the header content is hidden by default. A compact toggle button appears in the top-right corner of the bar. Clicking it expands the header content as a drop-down panel that overlays the page rather than reflowing it, then dismisses on a second click or an outside click.

The two properties that create the overlay effect are position: absolute on the panel (mobile) and position: static on the panel (desktop). The toggle button's animated width (a third of the bar when closed, floored at 11em so the label never clips, and 100% when open) is a secondary visual cue driven by a transition: width rule. Expand/collapse itself is handled by Bootstrap's collapse component rather than hand-rolled JavaScript.

Three structural layers make up the pattern. Each has a single responsibility: the outer wrapper anchors the overlay, the toggle button triggers it, and the panel holds the content.

<!--
    LAYER 1: OUTER WRAPPER
    position: relative on this element anchors the absolutely-positioned
    panel so it drops directly below this bar (not the page body).
-->
<div class="order-header-outer">

    <!--
        LAYER 2: TOGGLE BUTTON
        data-toggle="collapse" + data-target wire this button to the
        panel automatically. Bootstrap's JS handles the open/close state.
        d-xl-none hides the button entirely at the xl breakpoint (1200px+).
    -->
    <button class="order-header-toggle collapsed d-xl-none"
            type="button"
            data-toggle="collapse"
            data-target="#orderHeaderPanel"
            aria-expanded="false"
            aria-controls="orderHeaderPanel">
        Order Details
    </button>

    <!--
        LAYER 3: PANEL
        Bootstrap's .collapse class starts the panel hidden; .show is
        added/removed by the JS plugin when it opens or closes.
        d-xl-block forces the panel visible at the xl breakpoint,
        overriding the collapsed state on desktop.
    -->
    <div class="collapse d-xl-block order-header-panel" id="orderHeaderPanel">
        <div class="order-header-container">

            <!-- One .order-header-frame per data field -->
            <div class="order-header-frame">
                <span class="order-header-label">Order Number</span>
                <span class="order-header-value">#ORD-2024-00847</span>
            </div>

            <!-- Repeat for each additional field -->

        </div>
    </div>

</div>

These rules apply at all viewport widths. The desktop media query in Section 5 selectively overrides a handful of them. Because Bootstrap's collapse component now owns the show/hide mechanics, the panel itself needs far fewer custom rules than a hand-rolled version would; just enough to make it overlay the page instead of sitting in the normal flow.

.order-header-outer {

    position: relative;
    /*
     * Creates a positioning context so that position:absolute on the panel
     * is calculated from THIS element's edges, not from the nearest
     * positioned ancestor elsewhere in the DOM.
     * Without this, top:100% on the panel would not mean "below the toggle bar."
     */

    display: flex;
    justify-content: flex-end;
    /*
     * Pushes the toggle button to the right edge.
     * When the button is in its collapsed (one-third-wide) state it appears as a
     * compact tab in the corner rather than a left-aligned strip.
     */
}

.order-header-panel {

    position: absolute;
    /*
     * Lifts the panel out of the normal document flow entirely.
     * It will not push down sibling elements; it floats on top of them.
     * This is the property that gives the panel its "overlay" behavior.
     * Bootstrap's .collapse class still drives the height animation and
     * the show/hidden state. This rule only changes how the panel is
     * positioned once it's visible.
     */

    top: 100%;
    /*
     * 100% equals the full height of the containing block (.order-header-outer).
     * This places the top edge of the panel immediately below the toggle button.
     */

    left: 0;
    right: 0;
    /*
     * Stretches the panel to the full width of .order-header-outer.
     */

    z-index: 200;
    /*
     * Stacks the panel above other page content when it is open.
     * Raise this number if modals, sticky navbars, or other overlays
     * appear in front of the panel unexpectedly.
     */
}

.order-header-toggle {

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;

    width: 100%;
    /*
     * Full width when the panel is expanded (no .collapsed class).
     * The width transitions smoothly; see transition below.
     */

    border: none;
    padding: 10px 20px;
    cursor: pointer;
    white-space: nowrap;
    min-width: max-content;
    /*
     * Backstop only: keeps the label from clipping if it ever outgrows
     * the 11em collapsed floor (see .collapsed below). If this clamp
     * engages mid-animation the width visibly stops early, so widen the
     * floor rather than lean on it.
     */

    transition: width 0.35s ease;
    /*
     * Smoothly animates the width change between 100% (open) and
     * max(33%, 11em) (collapsed). This runs independently of Bootstrap's own
     * collapse animation on the panel. The two transitions are timed
     * to match (0.35s) so they finish together.
     */
}

.order-header-toggle.collapsed {

    width: max(33%, 11em);
    /*
     * Compact tab size when the panel is hidden. Because .order-header-outer
     * uses justify-content:flex-end, the collapsed button sits anchored to
     * the right side of the bar.
     *
     * The 11em floor is about TIMING, not just looks. With a plain 33%
     * target, min-width: max-content clamps the rendered width on narrow
     * screens, but the 0.35s transition timeline keeps running against
     * that frozen width, so the button visibly stops moving before the
     * panel's height animation finishes. Flooring the target with max()
     * means the transition never fights the clamp, and both animations
     * end together.
     *
     * The small script in Section 6 toggles this class in sync with
     * Bootstrap's show.bs.collapse / hide.bs.collapse events.
     */
}

.order-header-toggle::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    /*
     * A box with only its right and bottom edges drawn forms a corner.
     * Rotating that corner is what points it in different directions;
     * see the transform values below and on .collapsed below that.
     */
    transition: transform .2s ease;
    transform: translateY(-2px) rotate(45deg); /* pointing down, shown when OPEN */
}

.order-header-toggle.collapsed::after {
    transform: translateY(0) rotate(-45deg); /* pointing right, shown when CLOSED */
}

.order-header-container {

    display: flex;
    flex-direction: column;
    /*
     * On mobile: stacks each data frame (label + value pair) vertically.
     * The desktop media query overrides this to flex-direction:row.
     */

    align-items: flex-start;
    row-gap: 22px;
    padding: 18px 24px 24px;

    overflow-wrap: anywhere;
    word-break: break-word;
    /*
     * Allows long strings (order numbers, tracking IDs) to wrap at any
     * character instead of overflowing their container.
     */
}

.order-header-frame {

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;

    min-width: 0;
    /*
     * A common flexbox fix: flex items default to min-width:auto which
     * can cause them to overflow their container when content is wide.
     */

    max-width: 100%;
}

.order-header-frame:empty {
    display: none;
    /*
     * Automatically hides any frame element with no child content.
     * Useful when fields are conditionally rendered server-side.
     *
     * Caveat: :empty only matches a TRULY empty element; even the
     * whitespace/newline between tags defeats it. Render the empty
     * frame as <div class="order-header-frame"></div> with
     * nothing (not even a line break) between the tags.
     */
}

At 1200px and above the overlay behavior is entirely disabled. Bootstrap's d-xl-none and d-xl-block utilities already take care of hiding the toggle and forcing the panel visible, so this media query only needs to handle layout: the column-to-row switch for the data frames.

@media (min-width: 1200px) {

    .order-header-outer {
        display: block;
        /*
         * Reverts from flex to block. The toggle button is hidden by
         * d-xl-none so there is nothing left to right-align.
         */
    }

    .order-header-panel {
        position: static;
        /*
         * Puts the panel back in the normal document flow. On mobile the
         * panel was position:absolute so it overlaid content; here we undo
         * that so the bar occupies space and page content sits below it.
         */
    }

    .order-header-container {
        flex-direction: row;
        /*
         * Switches from the mobile vertical stack to a horizontal row
         * so data frames sit side by side across the full bar width.
         */

        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        padding: 10px 36px;
        gap: 36px;
        row-gap: 0;
        min-height: 80px;
    }

    .order-header-frame {
        flex: 0 1 auto;
        /*
         * flex-grow:0   = frame will NOT stretch to fill extra space.
         * flex-shrink:1 = frame CAN shrink if the bar is too narrow.
         * flex-basis:auto = frame starts at its natural content width.
         */

        min-width: 0;
    }

}

Bootstrap's collapse plugin handles the actual show/hide animation and the .show class on the panel automatically, so that part needs no custom code. Two small things are still hand-written: keeping the .collapsed modifier (and its +/− icon and width animation) on the button in sync with the panel's state, and dismissing the panel when the user clicks outside it on mobile.

(function () {

    var xlBreakpoint = 1200;
    var panel = document.getElementById('orderHeaderPanel');
    var btn   = document.getElementById('orderToggleBtn');

    function isMobile() {
        return window.innerWidth < xlBreakpoint;
    }

    /* Keep the button's .collapsed class + aria-expanded in sync with
       Bootstrap's own collapse events, instead of toggling it manually
       on click. */
    $(panel).on('show.bs.collapse', function () {
        btn.classList.remove('collapsed');
        btn.setAttribute('aria-expanded', 'true');
    });

    $(panel).on('hide.bs.collapse', function () {
        btn.classList.add('collapsed');
        btn.setAttribute('aria-expanded', 'false');
    });

    /* OUTSIDE-CLICK TO CLOSE (mobile only) */
    document.addEventListener('click', function (e) {

        if (!isMobile() || !panel.classList.contains('show')) {
            return;
        }

        var outer = panel.closest('.order-header-outer');

        if (outer && !outer.contains(e.target)) {
            $(panel).collapse('hide'); /* Bootstrap jQuery API */
        }
    });

})();

Mobile, closed: The outer wrapper is a flex row. The toggle button (a third of the bar wide, right-aligned, visible because the viewport is below the xl breakpoint) is shown. The panel carries Bootstrap's collapse class with no show, so it's hidden and takes up no space.

Mobile, open: Clicking the button fires Bootstrap's collapse plugin, which adds .show to the panel and animates its height. Our show.bs.collapse listener removes .collapsed from the button (animating it to 100% width) and rotates the chevron to point down. Because the panel is position:absolute, it overlays the page content below rather than pushing it down. Clicking outside fires the outside-click handler, which calls $(panel).collapse('hide') to reverse everything.

Desktop: d-xl-none hides the toggle entirely and d-xl-block forces the panel to display:block regardless of its collapse state. The media query switches the container to a horizontal row. The outside-click handler exits immediately because isMobile() returns false.