When in mobile mode, when the side navigation closes, it does not properly reset Drupal.displace() (which is an API that informs if a component is fixed to a side of the window).

You can see this by watching the dynamically generated CSS variables on the HTML tag.

Proposed resolution

Set width of `admin-toolbar__displace-placeholder` only for desktop. On mobile we don't need that displace.

CommentFileSizeAuthor
#32 Zrzut ekranu 2025-05-5 o 08.30.04.png487.67 KBbronismateusz
#18 ca5603b5bdc8eb4b88575a03856f830f.gif627.21 KBfinnsky
#18 5e939d0ee4be9996c7ce46aff4dfc98f.gif865.53 KBfinnsky
#9 before-patch.gif628.05 KBarunkumark
#9 After-patch.gif440.25 KBarunkumark
Home___Navigation_and_Untitled-1_—_us-courts-migration.png518.93 KBmherchel

Issue fork drupal-3443576

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mherchel created an issue. See original summary.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Project: Navigation » Drupal core
Version: master » 11.x-dev
Component: Code » navigation.module
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue tags: +Portland2024

mherchel opened merge request !7951

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Active » Needs review
finnsky’s picture

finnsky commented

I think we can do it simpler here.

`admin-toolbar__displace-placeholder` should be responsive probably.

finnsky opened merge request !7958

finnsky’s picture

finnsky commented

Yes.
Seems it was not about transitions but about default value of `admin-toolbar__displace-placeholder` which was 72px as for collapsed desktop sidebar.
CSS works here. Please review.

arunkumark’s picture

arunkumark
Location Coimbatore
commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new After-patch.gif440.25 KB
new before-patch.gif628.05 KB

Tested the MR, Working fine. Please find the attached screenshot for reference.

Before patch apply
Before

After patch apply
After

mherchel changed the visibility of the branch 3443576-mobile-version-of to hidden.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

+1 RTBC. Not setting the width of the element that displace monitors until it's at the appropriate width makes sense. Good solution!

nod_’s picture

nod_
Primary language French
Location Lille
commented
Status: Reviewed & tested by the community » Needs work

I'm not sure this is the right fix. I can still get the menu icon offset with the patch on the desktop resolution with the menu collapsed. it does fix the mobile use case but I think we need to fix it once for all the use cases.

I think the root of the issue is this rule: 

body.is-fixed .container {
  width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
}

This doesn't seem to work like expected. this would make sense for absolute/fixed positioned elements, but .containers are not, from what I can see they're managed with flexbox, so we don't need to account for anything special.

There is another issue with displace, there is a 9px offset on top, when there should be none.

nod_’s picture

nod_
Primary language French
Location Lille
commented

umm maybe that needs to be a follow-up issue

finnsky changed the visibility of the branch 3443576-css-only to hidden.

finnsky changed the visibility of the branch 3443576-css-only to active.

finnsky closed merge request !7958

finnsky reopened merge request !7958

finnsky’s picture

finnsky commented
StatusFileSize
new 5e939d0ee4be9996c7ce46aff4dfc98f.gif865.53 KB
new ca5603b5bdc8eb4b88575a03856f830f.gif627.21 KB

I got what you mean, but it is out of scope of navigation module. even more. this is not new problem

problem now:

now

problem before:

before

So i suggest to open Olivero ticket for this.

finnsky’s picture

finnsky commented
Status: Needs work » Needs review
smustgrave’s picture

smustgrave commented
Issue tags: +Needs followup

Tagging for follow up in #18

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs issue summary update

Can issue summary be updated to include proposed solution

gauravvvv’s picture

gauravvvv commented
Issue tags: -Needs followup
Related issues: +#3450773: Olivero: Incorrect positioning of close button on mobile device when navigation module is enabled.

Follow up issue created.

finnsky’s picture

finnsky commented
Issue summary: View changes
Status: Needs work » Needs review
smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs issue summary update +Needs Review Queue Initiative

Thanks all feedback appears to be addressed.

nod_ closed merge request !7958

  • nod_ committed 80b88cf2 on 10.3.x 
    Issue #3443576 by finnsky, mherchel, arunkumark, smustgrave, ckrina,...

  • nod_ committed 6e78beed on 10.4.x 
    Issue #3443576 by finnsky, mherchel, arunkumark, smustgrave, ckrina,...

  • nod_ committed 83ea1d22 on 11.0.x 
    Issue #3443576 by finnsky, mherchel, arunkumark, smustgrave, ckrina,...

  • nod_ committed 9a6641de on 11.x 
    Issue #3443576 by finnsky, mherchel, arunkumark, smustgrave, ckrina,...
nod_’s picture

nod_
Primary language French
Location Lille
commented
Version: 11.x-dev » 10.3.x-dev
Status: Reviewed & tested by the community » Fixed

Committed and pushed 9a6641dea3 to 11.x and 83ea1d22bf to 11.0.x and 6e78beed9e to 10.4.x and 80b88cf280 to 10.3.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

bronismateusz’s picture

bronismateusz commented
StatusFileSize
new Zrzut ekranu 2025-05-5 o 08.30.04.png487.67 KB

It seems that the problem still exists in Drupal 11.1.6:
problem

finnsky’s picture

finnsky commented

@bronismateusz

Hello!

on the screenshot I see Gin theme. The error repeats in Claro?
Gin has own JS as far as i understand https://git.drupalcode.org/project/gin/-/blob/4.0.x/js/navigation/naviga...