Home › Forums › WoodMart support forum › Shop Sidebar Scrollable

Shop Sidebar Scrollable

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 17, 2020 at 4:20 pm #187927

    John
    Participant

    Hello,
    Any chance to make the shop sidebar scrollable?
    https://imgur.com/a/tbHz0f3
    I am referring to the whole sidebar because I will add many layered nav filters and you need to scroll down to see all.
    The hidden sidebar is an option that works exactly as I need it but I need to be always visible on the shop page.
    thanks

    scroll {
    position: fixed;
    width: 150px;
    overflow-y: scroll;
    top: 0;
    bottom: 0;
}

    To sum same thing as hidden sidebar but always shows on desktop.
    Thanks 😀

    April 17, 2020 at 5:35 pm #187947

    Elise Noromit
    Member

    Hello,

    Please provide the page URl I will try to provide custom CSS.

    Best Regards

    April 17, 2020 at 6:01 pm #187956

    John
    Participant

    Hello the url is bellow, thanks for your interested in helping me. All the best

    April 17, 2020 at 8:39 pm #187968

    Elise Noromit
    Member

    Hello,

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

    body .sidebar-container {
    margin-bottom: 40px;
    max-height: 1500px;
    overflow-y: scroll;
}

    Please correct the height of the sidebar as per your needs.

    Best Regards

    April 17, 2020 at 10:19 pm #187970

    John
    Participant

    Elise many thanks for this css trick really appreciate.
    One more thing can somehow have same scrollbar as the widget layer nav? Now it is really big and ugly 🙁
    https://imgur.com/a/wN0hRVa
    Also it is possible to auto take height based on screen dimension 😀 if not it is ok like this

    April 18, 2020 at 1:29 pm #188106

    Elise Noromit
    Member

    Hello,

    Please replace this code: 

    .area-sidebar-shop {
    max-height: 1500px;
    overflow-y: auto;
}
.area-sidebar-shop::-webkit-scrollbar {
		width: 3px;
}
		
.area-sidebar-shop::-webkit-scrollbar-track {
	background-color: rgba(0,0,0,.15);
}
		
.area-sidebar-shop::-webkit-scrollbar-thumb {
		background-color: rgba(0,0,0,.25);
}

    Best Regards

    April 18, 2020 at 1:59 pm #188110

    John
    Participant

    Eliza you are awesome, the css code fix the issue perfectly. Thanks it is looking nice and smooth, maybe you can add this as an option in future release of the theme.
    One more thing…if I don’t ask too much…I have tried myself but without luck…any chance to get the height of the browser?

    https://stackoverflow.com/questions/20488298/how-to-specify-max-height-css-property-to-screen-size
    max-height: 1500px; to be auto or 100% based on the screen size?
    IF it doesn’t work it is perfectly anyways, many thanks !

    April 19, 2020 at 9:26 am #188216

    Elise Noromit
    Member

    Hello,

    It is not possible to set the height depending on the screen. In order to show the scroll, we need a fixed height.

    You can just change 1500px as per your needs.

    Best Regards

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