[email protected] wrote:
I have designed categories with images on the left, now i want to set one scrollbar only for categories and the main page scrollbar should help in scrolling products only.
Also i want static header and footer. This must not effect the design in mobile devices.
Please guide me how can i achieve this?
Thanks in advance!
Hello
[email protected],
this is not that simple to achieve, having just a screenshot of the site you want to implement it on I can suggest only a possible solution for you.
You can achieve this with only CSS, but I need to warn you that it will not be very dynamic and before you begin you need to know the exact desktop heights of your
Header,
Footer and other elements that you want to be fixed on the screen.
Then you need to add the following CSS code to your theme`s styling:
@media all and (min-width:1025px) {
.side-2,
.center-2 {
max-height: calc(100% - SUM_OF_FIXED_ELEMENTS_HEIGHTS);
overflow: auto;
}
}By adding this code, you won't need to actually fix any elements on the screen. The final result should be something like this:
You can play around with the
SUM_OF_FIXED_ELEMENTS_HEIGHTS value until <body> scroll on the right of the screen disappears. As you can see from the image, I have removed most of the default elements to match your screenshot and the height I used is 597px.
Hope this helps you achieve your goal.
Best regards,
Valentin.
