Issue with drop down menus jumping about bootstrap_lite HOT 4 CLOSED

Ugh.

So the CSS that is causing this comes from core/modules/system/css/menu-dropdown.theme.css, where the un-hovered CSS is at line 96:

  .menu-dropdown li.has-children > a {
    padding-right: 24px;
  }

and the hovered state is at line 13:

.js .menu-dropdown a,
.js .menu-dropdown a:hover,
.js .menu-dropdown a:focus,
.js .menu-dropdown a:active {
  /* make room for the toggle button (sub indicator) */
  padding-right: 58px;
  font-weight: normal;
  line-height: 17px;
  text-decoration: none;
}

The padding-right switches from 24px to 58px, hence the jump.

We could presumably add some really specific CSS that sets the padding-right back to 24px for just this particular case (?).

from bootstrap_lite.

My concern about fixing this issue is the potential to break existing sites that have already compensated for this problem. If we had plans for a 1.x-2.x branch, we could put this change there. But, I'm not sure if that is necessary. I'm inclined to think that it might be fine to fix this in the 1.x-1.x branch.

from bootstrap_lite.

I've found this same issue to be present with other popular themes:

• Corporate KISS (not in the main menu, but if I put a menu in the right sidebar of Moscone flipped, it happens there)
• Snazzy (ditto)
• Cleanish (both main menu and sidebar)
• Lumi (both main menu and sidebar)

All the themes that used dropdown menus (versus permanently expanded ones) and didn't display jumpiness overrode the relevant CSS in the theme.

So my conclusion is that the default CSS in core is inherently jumpy, and themes will have to override it to eliminate the jumpiness. So I think that we are fully justified in adding the CSS that you've added in the PR to the theme; I think it qualifies as "a compensation for an inconsistency in core."

And while it's possible that subthemes might have implemented their own compensation if this issue affected them, since your CSS selectors duplicate the selectors used in core, odds are that their compensation would override this CSS as well, so unlikely to break sites.

Conclusion: I think this is good to add to the next version release. In fairness to users, we should mention it in the release notes, but I think it's OK to add.

from bootstrap_lite.

So my conclusion is that the default CSS in core is inherently jumpy

...cough... see also this comment in Scenery

It's not only that, but things are even worse in RTL.

I didn't bother to open a core issue for it, because CSS changes usually stall there, anyway. So I silently fix it in every theme. At least for the main menu (but might miss special combinations).

from bootstrap_lite.