mobile-responsive

Mobile Responsiveness

RoleMule targets full mobile support down to 390px (iPhone 14). The viewport meta tag is set in base.html. Bootstrap 5 provides the grid and collapse utilities.

---

Breakpoints Used

Breakpoint	Width	Purpose
xl	< 1200px	Landing navbar collapses to hamburger
lg	< 992px	Dashboard navbar collapses to hamburger
md	< 768px	Primary mobile breakpoint — stack layouts, reduce padding
sm	< 576px	Auth card margins, small tweaks
xs	< 480px	Extra-small phones — font/padding reductions

---

Navbars

Landing Page (navbar_landing.html)

Uses navbar-expand-xl — collapses at < 1200px.

<nav class="navbar navbar-expand-xl navbar-dark fixed-top">
    <a class="navbar-brand" href="/">...</a>
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mx-auto">...</ul>
        <div class="nav-cta">...</div>
    </div>
</nav>

Why navbar-expand-xl: The landing nav has 6 links + 2 CTA buttons. At tablet widths (992–1199px) the items wrap to 2 lines without the xl breakpoint.

The hamburger icon uses a custom white SVG (Bootstrap's default is invisible on dark backgrounds):

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

The collapsed menu gets a dark glass background only on mobile via:

@media (max-width: 1199px) {
    .navbar-collapse {
        background: rgba(10, 10, 15, 0.98);
        backdrop-filter: blur(24px);
        border-top: 1px solid var(--border-color);
        padding: 0.75rem 0 1rem 0;
        ...
    }
    .navbar-collapse .nav-cta {
        padding: 0 1rem;   /* ← padding on nav-cta, NOT negative margin on collapse */
    }
}