The toolbar is not responsive.

Steps to reproduce:
-----------------
Install Drupal Core
Pick either Seven or Bartik as your theme (it is broken in both)
Log in
Create a long piece of content
Click on the manage menu link once to open the second level of menu items
Drag your screen equal to below 671px (this is where it breaks)
Notice that when you scroll down on a long page you can no longer see the admin toolbar

Expected behavior:
----------------
I would expect the toolbar to stay at the top of the page like it does at 672px and above so that I can close the manage submenu

Bug:
----
Currently, if you have the manage menu open and have scrolled down you end up with a menu that you cannot close

More Info:
---------
Gifs and patch to come momentarily.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ccjjmartin created an issue. See original summary.

ccjjmartin’s picture

Show problem gif:
---------------
Show toolbar stuck at top of screen

Expected behavior gif:
-------------------
Toolbar disappears off the top of the screen

ccjjmartin’s picture

ccjjmartin’s picture

Status: Needs review » Needs work
ccjjmartin’s picture

I was reviewing my original patch and found that when switching position from "absolute" to "fixed" the z-index was not set correctly on larger screen sizes and content was appearing above the menu, this looked terrible. So I went back and added a higher z-index to the toolbar and it looks good to me now. I tested on El Capitan in Safari, Firefox, and Chrome. I took a look on Windows 7 and IE11 and this patch works over there too.

There is another bug in Windows 7 / IE11 related to something (probably JS) adding a large amount of padding to the body when you resize after having scrolled down. But, that issue exists before and after this patch so that will be fixed separately see issue #2751643: Body padding too large, displace calculation inconsistent (IE10, IE11, and iPad2)

Chernous_dn’s picture

FileSize
29.21 KB

Test patch, work correctly. And on front page too.

Chernous_dn’s picture

Status: Needs review » Reviewed & tested by the community
Wim Leers’s picture

Version: 8.2.x-dev » 8.1.x-dev
Component: Stable theme » toolbar.module
Assigned: Unassigned » star-szr

#2: Nice! :)

+++ b/core/modules/toolbar/css/toolbar.module.css
--- a/core/themes/stable/css/toolbar/toolbar.module.css
+++ b/core/themes/stable/css/toolbar/toolbar.module.css

I'm not sure whether this can still be changed. The point of Stable is that it's frozen. Assigning Cottser for commit.

star-szr’s picture

Status: Reviewed & tested by the community » Needs review
+++ b/core/modules/toolbar/css/toolbar.module.css
@@ -56,17 +56,15 @@
-/* Position the admin toolbar absolutely when the configured standard breakpoint
- * is active. The toolbar container, that contains the bar and the trays, is
- * position absolutely so that it scrolls with the page. Otherwise, on smaller
- * screens, the components of the admin toolbar are positioned statically. */
+/* Position the toolbar at the top of the screen. */

Based on this CSS comment that's being updated I'm thinking this works as designed - minus the weird floating detached menu perhaps :D

I think the point is that on small screens real estate is often at a premium so the toolbar isn't fixed on smaller screens, "it scrolls with the page". #1847314-27: Reduce the dependency on JavaScript for the toolbar to display properly reinforces the code comment a bit.

I'm not sure what the toolbar did before #1847314: Reduce the dependency on JavaScript for the toolbar to display properly on small screens, might be worth a quick look, potentially we can find somewhere else this was discussed. But this doesn't feel like the kind of change to make without a fair amount of thought, particularly with Stable.

star-szr’s picture

Assigned: star-szr » Unassigned
ccjjmartin’s picture

If we passed the point of no return on the toolbar it might be worth looking into some other options for hiding the sidebar. The main thing I would consider a bug here is that when you scroll down on a long page you can't close the sidebar. The toolbar itself your right isn't really the problem here.

Maybe we could add something above "Content" that allows us to close the sidebar?

ccjjmartin’s picture

Status: Needs review » Needs work

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

ccjjmartin’s picture

Status: Needs work » Closed (won't fix)

Seems this is unlikely to gain traction due to it being a bug in stable. Marking as Closed (won't fix).