mobile header: tighten layout and fix menu layering

mandelstudio/templates/layout.html

@@ -15,6 +15,8 @@
 {{ block.super }}
 {# Ensure Carbasa webshop styling is present so responsive header/footer render correctly. #}
 <link rel="stylesheet" type="text/x-scss" href="{% static 'carbasa/webshop_base.scss' %}">
+{# Project-scoped header mobile fixes (no Bootstrap overrides). #}
+<link rel="stylesheet" type="text/x-scss" href="{% static 'mandelstudio/header_mobile.scss' %}">
 {% endblock %}
 
 {% block extrahead %}

static/mandelstudio/header_mobile.scss

@@ -0,0 +1,121 @@
+/* Scoped mobile header fixes for MandelBlog Studio.
+   Keep changes local to the Carbasa mega header to avoid desktop regressions. */
+
+header.mega_header {
+  @media (max-width: 991.98px) {
+    .header-inner {
+      .container {
+        flex-wrap: nowrap;
+        align-items: center;
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+      }
+
+      .navbar-brand {
+        margin: 0;
+        padding: 0;
+        position: relative;
+        z-index: 30;
+
+        .logo.big_brand img,
+        .logo img {
+          max-height: 36px;
+          width: auto;
+          height: auto;
+        }
+      }
+
+      .header-right {
+        padding-left: 0;
+        margin-left: auto;
+        gap: 0.5rem;
+        position: relative;
+        z-index: 30;
+
+        .user-button {
+          margin-right: 0;
+        }
+      }
+
+      /* Move the mobile menu toggle into the header (not floating at the bottom). */
+      .navbar-toggler {
+        position: static;
+        inset: auto;
+        width: 42px;
+        height: 42px;
+        margin: 0 0 0 0.5rem;
+        box-shadow: none;
+        background: #fff;
+        border: 1px solid rgba(15, 23, 42, 0.12);
+        z-index: 35;
+      }
+
+      /* Fullscreen mobile menu that sits above header icons. */
+      #navbarSupportedContent.show {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 100vh;
+        width: 100%;
+        overflow: auto;
+        background: #fff;
+        padding: 5.25rem 1.25rem 6rem;
+        z-index: 40;
+      }
+
+      /* Prevent header action icons overlapping the open menu. */
+      #navbarSupportedContent.show ~ .header-right {
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+      }
+
+      /* Make mobile menu items look consistent and aligned. */
+      #navbarSupportedContent {
+        .brand-wrapper {
+          display: none;
+        }
+
+        .navbar-nav {
+          width: 100%;
+          align-items: stretch;
+          gap: 0.25rem;
+        }
+
+        .navbar-nav > li {
+          width: 100%;
+        }
+
+        .navbar-nav > li > a.nav-link,
+        .navbar-nav > li > a.toggler.nav-link {
+          display: flex;
+          width: 100%;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0.85rem 0.25rem;
+          font-size: 1.1rem;
+        }
+
+        .dropdown-menu {
+          position: static;
+          float: none;
+          width: 100%;
+          border: 0;
+          padding: 0.25rem 0 0.75rem;
+          margin: 0;
+          background: transparent;
+        }
+
+        .dropdown-menu .nav-link {
+          justify-content: flex-start;
+          padding: 0.6rem 0.25rem;
+          font-size: 1rem;
+          opacity: 0.9;
+        }
+      }
+    }
+  }
+}
+