VisualEditor's toolbar disappears when scrolling down the page (in case of sticky navigation)

[bertrandgorge]

When using a sticky header, VisualEditor's toolbar tends to hide behind when scrolling.

[bertrandgorge]

The fix consists at adding this to the scss:

// force the visualeditor toolbar to stay on top
.ve-ui-toolbar {
    z-index: 5000;
}

(this issue can now be closed as the documentation might be enough, unless we want a proper support for VE ?)

[mudrd8mz]

I had a similar issue with my custom skin. This is what I did (navbarHeight and navbarBottomLine are defined in my custom SCSS):

.ve-init-mw-desktopArticleTarget-toolbar {
    margin-top: -($navbarHeight + $navbarBottomLine);
    padding-top: ($navbarHeight + $navbarBottomLine);
}

.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
    top: ($navbarHeight + $navbarBottomLine) !important;
}

[bertrandgorge]

For what it's worth, I've stopped using the sticky attribute of chameleon, based on HC-Sticky, and I now use vanilla bootstrap classes for that. I had bugs with HC Sticky (the nav bar would disappear from the screen), and now I have more control on the z-index of each component.

[revansx]

Thanks @mudrd8mz, I was seeking a solution to this problem that I could use in Mediawiki:Chameleon.css and modified yours to as:

.ve-init-mw-desktopArticleTarget-toolbar {
    margin-top: -50px;
    padding-top: 50px;
}

.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
    top: 55px !important;
}

and it seems to work very well. Thank you!