This topic contains 1 reply, has 2 voices, and was last updated by  Anonymous 3 years, 8 months ago.

Scrollbar Styling on Notification Dropdown

  • thekoreproject

    Member Reply #1838

    I can’t seem to find out where I can change the color of the scrollbar for the notifications dropdown (accessed from the top header bar.



    You must be logged in to view attached files.

    Support Staff Reply #1840

    Hi there,

    You can change the scrollbar color in the following places:

    1) Using CSS file. Add the following code in your custom.css

    .slimScrollBar {

    background: … !important;

    opacity: … !important;


    2) Using HTML file (where Metronic default color set for scrollbar). Find the following code in HTML file

    <ul class=”dropdown-menu-list scroller” style=”height: 250px;” data-handle-color=”…”>


    and add you color to data-handle-color=”…”

    3) Additionally, you can change from JS file. Refer to

    <script src=”../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.js” type=”text/javascript”></script>

    and change the following codes

    // scrollbar color, accepts any hex/color value

    color: ‘#000’,

    // sets scrollbar opacity

    opacity: .4,

    in the lines 26 and 38 respectively.

    If ever we can be of assistance, please let us know.

    Cheers! 😉

You must be logged in to reply to this topic.