Mobile Header Fixed Position overlap and toolbar positioning issues

[drale1]

Summary

Mobile Header Fixed Position option in DXPR Theme 8.0.0 has two issues:

1. When logged in as administrator with toolbar visible, the fixed header doesn't position correctly at the top - it leaves a gap for the toolbar instead of going fully to the top.
2. When logged out (anonymous user) or logged in as regular user (without toolbar), the fixed header overlaps the page title, hiding the first part of the title.

Related Drupal.org issue: https://www.drupal.org/project/dxpr_theme/issues/3556735

Steps to reproduce

1. Install Drupal 10.5.5 (or compatible version)
2. Install and enable DXPR Theme 8.0.0
3. Enable "Mobile Header Fixed Position" in theme settings:
   • Go to Appearance → Settings → DXPR Theme
   • Expand "Header" → "Mobile Header"
   • Check "Fixed Position"
   • Save configuration
4. Create a page with a page title (e.g., "Formulaire de contact" or any other title)
5. Test in mobile viewport (use browser DevTools to set mobile viewport, e.g., iPhone 12 Pro):
   • Test 1: Logout (anonymous user) and visit the page
   • Test 2: Login as administrator (with toolbar visible) and visit the page
   • Test 3: Login as regular user (without admin toolbar) and visit the page

Example Project

What is the current bug behavior?

1. As administrator with toolbar:

   • The mobile fixed header leaves a gap for the toolbar and doesn't go fully to the top
   • The header appears below the toolbar instead of at the very top of the viewport

2. As anonymous user or regular logged-in user (without toolbar):

   • The mobile fixed header overlaps the page title
   • The first part of the page title is hidden/covered by the fixed header
   • Example: "Formulaire de contact" shows only "contact" (second line), with "Formulaire de" hidden under the header

What is the expected correct behavior?

1. As administrator with toolbar:

   • The mobile fixed header should position correctly, accounting for the toolbar space
   • The header should be visible and functional below the toolbar

2. As anonymous user or regular logged-in user (without toolbar):

   • The mobile fixed header should not overlap the page title
   • The full page title should be visible below the fixed header
   • Content should have appropriate padding-top to prevent overlap

Relevant logs and/or screenshots

Screenshots are available in the Drupal.org issue: https://www.drupal.org/project/dxpr_theme/issues/3556735

Screenshot 1: Administrator with toolbar - header leaves gap for toolbar
Screenshot 2: Anonymous user - header overlaps page title (only "contact" visible, "Formulaire de" is hidden)

Possible fixes

The issue is in scss/components/dxpr-theme-header--mobile.scss. The .wrap-containers element needs conditional padding based on user role and toolbar presence.

Solution: Add CSS rules to handle padding for .wrap-containers when mobile fixed header is active:

1. For anonymous users and regular logged-in users (without toolbar):

   &:has(#navbar.header-mobile-fixed):not(.toolbar-horizontal):not(.toolbar-vertical):not(.toolbar-fixed) .wrap-containers {
     padding-top: calc(var(--dxt-setting-header-mobile-height) + 3%);
   }

2. For administrators with toolbar:

   &:has(#navbar.header-mobile-fixed).toolbar-horizontal .wrap-containers,
   &:has(#navbar.header-mobile-fixed).toolbar-vertical .wrap-containers,
   &:has(#navbar.header-mobile-fixed).toolbar-fixed .wrap-containers {
     padding-top: 0;
   }

3. For Gin vertical toolbar (special case):

   &.gin--vertical-toolbar:has(#navbar.header-mobile-fixed) .wrap-containers {
     padding-top: var(--dxt-setting-header-mobile-height);
   }

These rules should be added after line 296 in scss/components/dxpr-theme-header--mobile.scss, before the closing brace of .body--dxpr-theme-nav-mobile block.

File to modify:

• scss/components/dxpr-theme-header--mobile.scss (around line 296-297)