mobile header: tighten layout and fix menu overlay

mandelstudio/static/mandelstudio/header_mobile.css

@@ -0,0 +1,115 @@
+/* Mobile header / navigation fixes for MandelBlog Studio.
+   Scoped to Carbasa mega header to avoid desktop regressions. */
+
+@media (max-width: 991.98px) {
+  header.mega_header .header-inner .container {
+    flex-wrap: nowrap;
+    align-items: center;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  header.mega_header .header-inner .navbar-brand {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    z-index: 30;
+  }
+
+  header.mega_header .header-inner .navbar-brand .logo.big_brand img,
+  header.mega_header .header-inner .navbar-brand .logo img {
+    max-height: 36px;
+    width: auto;
+    height: auto;
+  }
+
+  header.mega_header .header-inner .header-right {
+    padding-left: 0;
+    margin-left: auto;
+    gap: 0.5rem;
+    position: relative;
+    z-index: 30;
+  }
+
+  header.mega_header .header-inner .header-right .user-button {
+    margin-right: 0;
+  }
+
+  /* Move the mobile menu toggle into the header (not floating at the bottom). */
+  header.mega_header .header-inner .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. */
+  header.mega_header .header-inner #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. */
+  header.mega_header .header-inner #navbarSupportedContent.show ~ .header-right {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  /* Make mobile menu items consistent and aligned. */
+  header.mega_header .header-inner #navbarSupportedContent .brand-wrapper {
+    display: none;
+  }
+
+  header.mega_header .header-inner #navbarSupportedContent .navbar-nav {
+    width: 100%;
+    align-items: stretch;
+    gap: 0.25rem;
+  }
+
+  header.mega_header .header-inner #navbarSupportedContent .navbar-nav > li {
+    width: 100%;
+  }
+
+  header.mega_header .header-inner #navbarSupportedContent .navbar-nav > li > a.nav-link,
+  header.mega_header .header-inner #navbarSupportedContent .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;
+  }
+
+  header.mega_header .header-inner #navbarSupportedContent .dropdown-menu {
+    position: static;
+    float: none;
+    width: 100%;
+    border: 0;
+    padding: 0.25rem 0 0.75rem;
+    margin: 0;
+    background: transparent;
+  }
+
+  header.mega_header .header-inner #navbarSupportedContent .dropdown-menu .nav-link {
+    justify-content: flex-start;
+    padding: 0.6rem 0.25rem;
+    font-size: 1rem;
+    opacity: 0.9;
+  }
+}
+

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 mobile header fixes (plain CSS; no Bootstrap overrides). #}
+<link rel="stylesheet" href="{% static 'mandelstudio/header_mobile.css' %}">
 {% endblock %}
 
 {% block extrahead %}