Here are two screens, one while logged in with admin and other with an anonymous user

With admin user:
admin

With Anonymous user:
anonymous

CommentFileSizeAuthor
#17 Screen Shot 2020-06-09 at 10.27.06 AM.png73.25 KBkomalk
#16 Screen Shot 2020-06-08 at 3.22.54 PM.png46.29 KBju.vanderw
#12 issue-3146537-cross-button-issue-on-homepage-no-content.gif7.25 MBsreenivas bttv
#11 open-menu.gif1.55 MBmherchel
#7 Screenshot 2020-06-06 at 4.09.32 PM.png26.81 KBhimanshu_sindhwani
#5 after-patch-anonymous-user.png66.75 KBkomalk
#5 before-patch-anonymous-user.png52.48 KBkomalk
#5 after-patch-admin-user.png64.13 KBkomalk
#5 before-patch-admin-user.png84.87 KBkomalk
#5 interdiff_4-5.txt229 byteskomalk
#5 3146537-5.patch631 byteskomalk
#4 Fix_cross_button_of_menu_align-3146537-4.patch338 bytessreenivas bttv
Screenshot 2020-06-05 at 1.59.18 PM.png56.51 KBhimanshu_sindhwani
Screenshot 2020-06-05 at 1.58.05 PM.png59.43 KBhimanshu_sindhwani

Comments

himanshu_sindhwani created an issue. See original summary.

himanshu_sindhwani’s picture

himanshu_sindhwani commented
Issue summary: View changes
sreenivas bttv’s picture

sreenivas bttv commented
Assigned: Unassigned » sreenivas bttv
sreenivas bttv’s picture

sreenivas bttv commented
Assigned: sreenivas bttv » Unassigned
Status: Active » Needs review
StatusFileSize
new Fix_cross_button_of_menu_align-3146537-4.patch338 bytes

@himanshu_sindhwani, Thanks for raising the issue. I have attached a patch that fixes the issue.

Patch details:
- While clicking on the mobile nav button js-fixed class adding to body. so keeping width: 100% fixed the issue when body has js-fixed class.

komalk’s picture

komalk commented
StatusFileSize
new 3146537-5.patch631 bytes
new interdiff_4-5.txt229 bytes
new before-patch-admin-user.png84.87 KB
new after-patch-admin-user.png64.13 KB
new before-patch-anonymous-user.png52.48 KB
new after-patch-anonymous-user.png66.75 KB

patch #4 is applied successfully.
#5 added base.css file along with complied css
attached the screen shot for the reference.

mherchel’s picture

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

I'm unable to reproduce this. What browser are you seeing this in? Are you testing alpha2 or the latest HEAD?

himanshu_sindhwani’s picture

himanshu_sindhwani commented
StatusFileSize
new Screenshot 2020-06-06 at 4.09.32 PM.png26.81 KB

I tested with the latest head. I read the CSS written in base.css and observed body gets width: 100% when it has class 'is-always-mobile-nav'.
And this class is added when you have the checkbox Use the favicon supplied by the theme checked in theme settings.
If this checkbox is off you will see the issue.

checkbox

I am using Chrome browser.

hansa11’s picture

hansa11 commented

@himanshu_sindhwani: I still couldn't replicate this one, is there anything else that should be followed other than the above steps?

himanshu_sindhwani’s picture

himanshu_sindhwani commented

@hansa11 , have you made the checkbox off as mentioned in #7 ?

sreenivas bttv’s picture

sreenivas bttv commented

@mherchel, @hansa11,

The misalignment happen when especially at the home page when no content available.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new open-menu.gif1.55 MB

I'm still unable to reproduce. Here's an animated gif.

sreenivas bttv’s picture

sreenivas bttv commented
StatusFileSize
new issue-3146537-cross-button-issue-on-homepage-no-content.gif7.25 MB

@mherchel,

As mentioned in #10, the issue will happen only when the home page has no content or fresh installation of Drupal.

issue of cross menu button

mherchel’s picture

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

@Sreenivas Bttv - the animated gif in #11 is on the homepage with no content.

In your gif above, I see there is content. I'm still unable to reproduce this.

ju.vanderw’s picture

ju.vanderw commented

@himanshu_sindhwani I also can't reproduce this - I have favicon checkbox off, as well as Enable mobile menus at all widths off, as shown on your screenshot. I'm on Drupal 8.9.

himanshu_sindhwani’s picture

himanshu_sindhwani commented

To be more specific I am using chrome on IOS device. I have to check on other devices. Its certainly reproducing for me.

ju.vanderw’s picture

ju.vanderw commented
StatusFileSize
new Screen Shot 2020-06-08 at 3.22.54 PM.png46.29 KB

I was on Chrome browser on a MacBook, and had the mobile testing set to iPhone X.

komalk’s picture

komalk commented
StatusFileSize
new Screen Shot 2020-06-09 at 10.27.06 AM.png73.25 KB

I was on Chrome browser on a MacBook, and had the mobile testing set to iPhone X.
able to reproduce this issue logged in with an anonymous user.

ju.vanderw’s picture

ju.vanderw commented

I was finally able to duplicate it - by creating a new account that was not administrator, but just an authenticated user, like @komalkolekar mentioned.

In fact, after some testing, this happens when the user is logged in but does not have permissions for the admin toolbar, because even as an administrator, when I gave permission for the toolbar, it fixed the problem. Also, it only seems to be happening on `/user` for me.

Removing body.js-fixed {position: fixed} seems to fix the problem.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Reviewed & tested by the community

Thanks @ju.vanderw! Yep. I'm finally able to duplicate it. It's on the user page when there is no admin toolbar. Weird stuff. The patch fixes it perfectly.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Reviewed & tested by the community » Fixed

Committed. Thanks!

Status: Fixed » Closed (fixed)

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