When the following criteria are met, the content will overflow the page and a horizontal scrollbar will be visible

1. Secondary menu is removed
2. Search block is removed.
3. Last primary parent menu item has children.
4. Viewport width is between 1200px and 1480px(ish)


CommentFileSizeAuthor
#30 3185067_30.patch548 bytesdsandhya
#30 after-horizontalscrollbar.png80 KBdsandhya
#30 before-horizontalscroolbar.png79.97 KBdsandhya
#28 After patch.png87.32 KBBushra Shaikh
#27 3185067-27.patch3.24 KBgauravvvv
#27 Screenshot 2023-01-03 at 2.58.20 PM.png176.06 KBgauravvvv
#26 Screenshot 2023-01-03 at 2.33.20 PM.png311.19 KBgauravvvv
#19 Screenshot 2021-03-05 at 2.54.16 AM.png52.95 KBimalabya
#18 3185067-after.mp47.09 MBabhijith s
#18 3185067-before.mp42.95 MBabhijith s
#17 3185067_after_17.png233.05 KBhinal05
#17 3185067_before_17.png234.9 KBhinal05
#16 3185067-16.patch2.98 KBdjsagar
#16 interdiff_14-16.txt2.48 KBdjsagar
#14 3185067-14.patch2.76 KBdjsagar
#14 interdiff_11-14.txt1.26 KBdjsagar
#14 20210108_113443432.mp427.82 MBdjsagar
#14 Screen-size-1600px.png264.65 KBdjsagar
#14 Screen-size-1280px.png262.28 KBdjsagar
#12 after-patch.mp41.85 MBdjsagar
#12 after-pacth.png291.45 KBdjsagar
#11 interdiff_10-11.txt1.4 KBkomalk
#11 3185067-11.patch2.1 KBkomalk
#10 3185067-horizontal-scrollbar-10.patch1.05 KBhenry.odiete
#9 3185067-9.patch1.98 KBviappidu
#7 3185067-7.patch1.33 KBviappidu
#4 wide-menu.png149.99 KBmherchel
#3 pick-a-diffence.PNG132.49 KBviappidu
#2 Home___Drupal-3.png172.79 KBmherchel
Right.PNG205.76 KBviappidu
Wrong.PNG208.24 KBviappidu

Comments

viappidu created an issue. See original summary.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Active » Closed (cannot reproduce)
StatusFileSize
new Home___Drupal-3.png172.79 KB

The images that you attached just show the site-branding area of the theme. I can't see the problem.

I tried to reproduce the problem by disabling the secondary navigation and also only having one nav item (with drop down items), and it looks good. Screen shot is attached.

Closing as "cannot reproduce". Feel free to re-open this, but if you do, please update the summary to include better steps to reproduce, and better screenshots.

viappidu’s picture

viappidu commented
Status: Closed (cannot reproduce) » Active
StatusFileSize
new pick-a-diffence.PNG132.49 KB

It seems that if there is no secondary navigation menu

It seems that if there is *NO* secondary navigation menu

Are you sure you removed the search block from secondary menu?

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes
StatusFileSize
new wide-menu.png149.99 KB

OK. I figured this out. This only happens when the following criteria are met

1. Secondary menu is removed
2. Search block is removed.
3. Last primary parent menu item has children.
4. Viewport width is between 1200px and 1480px(ish)

The issue is that since the last menu item has children, the children are set to visibility: hidden, which still creates the layout space.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Title: Width of main navigation exceeding vw » Under certain circumstances the primary navigation can create horizontal scrollbar
Version: 9.1.x-dev » 9.2.x-dev
Issue summary: View changes
Priority: Normal » Minor
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes
viappidu’s picture

viappidu commented
Status: Active » Needs review
StatusFileSize
new 3185067-7.patch1.33 KB

Thanks!
I knew you could pick it much faster than me :)

I solved with patch and I cannot see any particular problem or side effect though, again, I'm relying on better eyes...

viappidu’s picture

viappidu commented

MY BAD!
Realized with previous patch the secondary menu is badly offset!

viappidu’s picture

viappidu commented
StatusFileSize
new 3185067-9.patch1.98 KB

Not sure is the best/right solution though in this way the problem is gone

henry.odiete’s picture

henry.odiete commented
StatusFileSize
new 3185067-horizontal-scrollbar-10.patch1.05 KB

addded width 250px on active element and removed transition on opacity

komalk’s picture

komalk commented
StatusFileSize
new 3185067-11.patch2.1 KB
new interdiff_10-11.txt1.4 KB

#10 - Not included the compiled CSS file of core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css and also having the CSS lint issue.
Worked on #10.

djsagar’s picture

djsagar commented
StatusFileSize
new after-pacth.png291.45 KB
new after-patch.mp41.85 MB

HI,

Issue is still same after applied patch and issue is not only 1200px, Jerking issue shows 1440px also.

For more info please check the video.

Thanks!

djsagar’s picture

djsagar commented
Status: Needs review » Needs work
djsagar’s picture

djsagar commented
Status: Needs work » Needs review
StatusFileSize
new Screen-size-1280px.png262.28 KB
new Screen-size-1600px.png264.65 KB
new 20210108_113443432.mp427.82 MB
new interdiff_11-14.txt1.26 KB
new 3185067-14.patch2.76 KB

Hi,

I made some modification in css file for resolving this issue only.
For verification check the video and screen-short which i uploaded.
Please review the changes and gave feedback.

Thanks!

ravi.shankar’s picture

ravi.shankar commented
Status: Needs review » Needs work

NW as patch #14 is not green.

djsagar’s picture

djsagar commented
Status: Needs work » Needs review
StatusFileSize
new interdiff_14-16.txt2.48 KB
new 3185067-16.patch2.98 KB

Here, rolling up new patch

hinal05’s picture

hinal05 commented
StatusFileSize
new 3185067_before_17.png234.9 KB
new 3185067_after_17.png233.05 KB

Applied patch #16. Please see the attachment. I have checked in mac chrome, firefox and edge and after applied patch horizontal scrollbar not visible. RTBC +1

abhijith s’s picture

abhijith s commented
StatusFileSize
new 3185067-before.mp42.95 MB
new 3185067-after.mp47.09 MB

Applied patch #16 and it works fine.The horizontal scrollbar is removed after applying the patch.Screen recordings included.

RTBC +1

imalabya’s picture

imalabya
Primary language English
Location Bangalore
commented
Status: Needs review » Needs work
StatusFileSize
new Screenshot 2021-03-05 at 2.54.16 AM.png52.95 KB

The patch resolves the issue meticulously for the breakpoints but the dropdown differs from the original design when the conditions in the IS are not met as well, like even with search block and secondary menu present the dropdown shifts positions. Also, the dropdown position shifts for larger screens as well.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

kiran.kadam911’s picture

kiran.kadam911
he/him
Location Mumbai, India 🇮🇳
commented
Issue tags: +Needs subsystem maintainer review, +Needs design review
mherchel’s picture

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

To me, its extremely edge case, with a lot of downsides if we don’t do it properly.

Whatever solution we implement should not affect the design and placement of the dropdown unless all of the edge case conditions are met.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new Screenshot 2023-01-03 at 2.33.20 PM.png311.19 KB

I can confirm this is still happening on d10. Attached screenshot for reference.

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review
StatusFileSize
new Screenshot 2023-01-03 at 2.58.20 PM.png176.06 KB
new 3185067-27.patch3.24 KB

Addressed the issues of comment #19. I have attached a patch for d10. Adding screenshot for reference. Please review

Bushra Shaikh’s picture

Bushra Shaikh commented
StatusFileSize
new After patch.png87.32 KB

I have verified patch #27 on Drupal 10.1.x version but applied successfully but the issue is not fixed.
I can still see the issue after applying the patch.
refer to the screenshot:

Need work

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

Per #28

dsandhya’s picture

dsandhya commented
StatusFileSize
new before-horizontalscroolbar.png79.97 KB
new after-horizontalscrollbar.png80 KB
new 3185067_30.patch548 bytes

This issue is fixed for desktop resolution for the version
10.1.x-dev and its working fine for me please verify

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.