Horizontal scrollbar - how to change colour

I thought someone may find this handy.

I just upgraded to 7.2.1 and am using an adjusted version of the Evo template.

A member of my site mentioned that the scrollbar under the top navigation menu (which appears on mobile devices because the menu bar overflows off the page to the right-hand side) wasn't very obvious.

I thought that changing the colours of the scrollbar would make it more apparent that extra menu items were available if they realized they could scroll to see them. The fact you could scroll to see more menu items was obvious to me but to someone looking at the site for the first time then maybe it wouldn't be so obvious.

Look for the top_menu.css in your template and then edit the background-color of this section to change the track of the scrollbar:

    div.sys_mm_cnt::-webkit-scrollbar-track {

         -webkit-border-radius: 3px;

         border-radius: 3px;

         background-color: rgba(0, 0, 0, 0.4); 

    }

And edit the background of this section to change the part of the scrollbar that moves (the thumb)

    div.sys_mm_cnt::-webkit-scrollbar-thumb {

         -webkit-border-radius: 3px;

         border-radius: 3px;

         background: rgba(255, 255, 255, 0.9); 

         webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5); 

    }

It is also a rather clunky solution; a better solution needs to be implemented.  However, we often have to pull Boonex kicking and screaming to make such changes.

Also, remember your solution should be cross-browser supported.

Profesize, have any of your members expressed any misgivings about the slider menu vs. traditional dropdown?

I haven't gone live with v7.2.1 yet. Still using v7.1.6. Still tweaking the template for v7.2.1 on a test site and have so far had minimal response from some key members who are helping refine the template.

No comments about the lack of dropdown, just a comment about it being strange that the slider menu is not controlled by a scrollbar but by actually dragging the menu across.

Old school used in

body {
scrollbar-face-color : navy;
scrollbar-highlight-color : blue;
scrollbar-3dlight-color : gray;
scrollbar-darkshadow-color : black;
scrollbar-shadow-color : gray;
scrollbar-arrow-color : red;
scrollbar-track-color : white;

} /* Patriotic */

Haven't used in years ..so maybe it will / maybe it won't! 

Experiment:  No Pain No Gain / No Guts No Forum Glory