Magento comes with the overwhelmingly helpful ability to categorize items using attributes. You can then set these attributes to show on your category pages as layered navigation with scroll bars, which typically is the filtering by attribute value found in the left hand column of a category page. Depending on your use of attributes and the values you assign to each attribute, the lists of attribute values can be quite long.
For this example, we are a clothing store. Here, the list of colors contains many color choices, now imagine if you had an attribute for designers, sizes, prices, fabric types, garment types, etc… The list of possible choices for each attribute can lengthen your page considerably if each attribute value is listed. The solutions to shorten your pages, and bring more attributes up higher on the page is to add scroll bars to your layered navigation. Add the following CSS to your theme:
dl#narrow-by-list dd >ol {
max-height: 165px;
overflow-x: hidden;
}
The max-height of the scroll bars can be adjusted to allow for more items to show, or less if you prefer. Here, 165px shows 6 attribute values, and a scroll bar to allow us to get to the rest of the values. If there are fewer than 6 attribute values, the scroll bar does not show, it only shows when the height of the attribute values exceeds 165px.
The post How to Add Scroll Bars to Layered Navigation in Magento appeared first on Vertical Rail.