So I am using Version 1.5.6.1 of Opencart, and I am using the stock theme but with some colour changes. I wanted to make my complete site responsive so I downloaded and installed OpenCart Responsive theme by Peter Stuart which just runs on top of the stock theme but makes your site work on mobile devices.
The problem I am having, has to do with the Categories selection while viewing the site on a mobile device. On a regular desktop computer screen you would see the different categories on the menu bar, and as you mouse over them the sub-categories will drop down, it works and looks great.
On mobile devices you have to click on "Categories" then a drop down menu shows you the main categories, but as you mouse over the main categories it does not show you the sub-categories, so you have to click on one of the main categories and then it opens to that category but does not display the sub-categories. There is instead a box that says "Refine Search", when you click on that box then the drop down menu of the sub-categories does appear. Is there a way to force the "Refine Search" to display the drop down menu of the sub-categories when you click on the main category you want ?
Here is a screenshot of how I would like it to look
http://i.imgur.com/htZxiSU.jpg
Here is what I hope is the relevant CSS from the stylesheet-mobile
Code: Select all
/* Product Search */
/* Category */
.category-info {
display: none;
}
#content h2 {
color: #fff;
background: #27AFEB;
padding: 5px 10px;
margin: 0;
}
.category-list {
width:96%;
margin: 0 auto;
padding: 0;
display: none;
}
.category-list ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
.category-list ul li {
display: block;
}
.category-list ul li a {
line-height: 30px;
text-decoration: none;
display: none;
padding: 0 10px;
color: #222;
border: #ccc 1px solid;
border-top: none;
}
.product-filter {
margin-top: 15px;
}
.product-filter > div > b:nth-child(1), .product-filter .display {
display: none;
}
