Home › Forums › WoodMart support forum › Style Scrollbars

Style Scrollbars

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 20, 2020 at 4:53 pm #196467

    olgaonline2020
    Participant

    Hello,

    I am using an id selector to add a scrollbar to an element:

    #menuscrollbar{
    height:320px;
    overflow:scroll;
    overflow-x:hidden;
    }

    How can style the scrollbar to the style of the scrollbars of the theme? The scrollbar created by the css code shown above is the browser’s scrollbar..

    Thank you

    May 20, 2020 at 9:26 pm #196515

    Elise Noromit
    Member

    Hello,

    Please provide the page URL and screen of the block which needs the scroll bar, I will provide custom CSS.

    Best Regards

    May 21, 2020 at 11:07 am #196679

    olgaonline2020
    Participant

    Hi,

    I would like to style the scrollbar at 2 locations:

    Location 1) I have added id #menuscrollbar for visual composer element ‘WP Custom Menu’ for an HTML block that is set for a product category element on navigation menu.

    I have added this css code already:

    #menuscrollbar{
height:200px;
overflow:auto;
overflow-x:hidden;
}

    —-

    Location 2) WP Product Categories widget on shop page sidebar:

    I have added this css code already:

    #woocommerce_product_categories-1 .product-categories{
height:300px;
overflow:auto;
overflow-x:hidden;
}

    I added the following css code I found in forum that does not style the scrollbar:

    #woocommerce_product_categories-1 .product-categories::-webkit-scrollbar {
	width: 3px;
}
#woocommerce_product_categories-1 .product-categories::-webkit-scrollbar-track {
	background-color: rgba(0,0,0,.15);
}
#woocommerce_product_categories-1 .product-categories::-webkit-scrollbar-thumb {
	background-color: rgba(0,0,0,.25);
}
#woocommerce_product_categories-1 .product-categories::-webkit-scrollbar-thumb {
	background-color: rgba(0,0,0,.25);
}

    Please check Private content for URL and locations of scrollbars.
    Thank you

    May 21, 2020 at 8:20 pm #196841

    Elise Noromit
    Member

    Hello,

    Please provide the site admin access to the private area and remove your custom CSS and classes.

    Best Regards

    May 21, 2020 at 8:49 pm #196857

    olgaonline2020
    Participant

    Please check Private content.

    May 22, 2020 at 12:08 pm #196986

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    body .widget_nav_menu ul li.menu-item-6831{
height:100px;
overflow-y:auto;
	overflow-x:hidden;
}
body .widget_nav_menu ul li.menu-item-6831::-webkit-scrollbar{
	width: 3px;
}
body .widget_nav_menu ul li.menu-item-6831::-webkit-scrollbar-track {
	background-color: rgba(0,0,0,.15);
}
body .widget_nav_menu ul li.menu-item-6831::-webkit-scrollbar-thumb {
	background-color: rgba(0,0,0,.25);
}
body .widget_nav_menu ul li.menu-item-6831::-webkit-scrollbar-thumb {
	background-color: rgba(0,0,0,.25);
}

    Best Regards

    May 22, 2020 at 1:25 pm #197019

    olgaonline2020
    Participant

    Please read private content.

    Is this added twice?
    body .widget_nav_menu ul li.menu-item-6831::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.25);
    }

    May 22, 2020 at 8:49 pm #197112

    Elise Noromit
    Member

    Hello,

    I have deleted public screenshot

    Yes, seems I have duplicated the style please remove the duplicate.

    The option to customize the scroll is provided in Webkit (Chrome) only, there is no option in FireFox and our theme does not influence that.

    Best Regards

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)