My Apex application looks fine on MS Edge and IE. There is a left Navigation Bar (Universal Theme), which has been modified using CSS within the theme roller. The scrollbar for the navigation menu displays as expected in these browsers.
However the scrollbar on Chrome is ultra thin and hard to select. I couldn't find a class name for the scrollbar specifically.
My css is
.t-TreeNav
.a-TreeView-node--topLevel > .a-TreeView-row,
.t-TreeNav .a-TreeView-node--topLevel .a-TreeView-label,
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-toggle,
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content,
.t-TreeNav .a-TreeView-node--topLevel .a-TreeView-content
.fa
{
height: 30px;
line-height: 30px;
padding-right: 0px;
}
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content .a-TreeView-label
{
line-height: 30px;
padding-left: 0px;
padding-right: 10px;
}
.t-TreeNav
.a-TreeView-node--topLevel > .a-TreeView-toggle
{
padding: 0px 0px 0px 0px;
}
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content
.fa
{
padding: 0px 9px 8px 13px;
}
.t-TreeNav .a-TreeView-node--topLevel > ul > .a-TreeView-node
{
padding-left: 32px;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
}
.t-TreeNav .a-TreeView-node--topLevel ul .a-TreeView-content
{
line-height: 0px;
padding-left: 10px;
}
.t-PageBody
{
padding-left: 30px;
}
.t-PageBody--leftNav .t-Body-nav
{
width: 320px;
padding-right: 10px;
}