responsive sidebar open upon page load

We have added some code to our template page layout file Columns_Two.cshtml after the

@Html.Widget("left_side_column_after_category_navigation")

code. We wanted to make an additional section with the same look. This is what we have put.

        

<div class="block block-category-navigation">
            <div class="title">
                <strong>Product Guide</strong>
            </div>            
            <div class="product-catelog">
            <a href="/Content/Images/uploaded/PDFs/CATALOG_WEB.pdf" target="_blank" ><img src="~/Content/images/uploaded/ProductGuideCover_2014.jpg" width="190px" height="245px" /></a>
            </div>
        </div>

The problem is that when the site is utilizing media query's (any size smaller than 100px) the clickable title is already dropped down.  How can we make it act the same as the category list where you need to click to open the category list?

That should say any size smaller than 1000px, not 100px.

Hi JKEELER,

I cannot be quite sure what is going on on your side. I just tested your code and put in the side bar and in smaller resolutions it is collapsed by default. The important thing is to have the div with class "block" and in it a div with a class name "title", which you have.

Would it be possible to send us a link to your site so that we can have a closer look or it will be best if you download the theme again and update your existing theme with the downloaded one, which will contain latest bug fixes.

You can follow the article on how to update a theme or wath the following video.

Hope that helps!

We are currently using the latest version, however we do have quite a bit of styling changes which could lead to the issue.

We have just went live with our site which can be viewed here: http://bit.ly/1dQJPK5

I will add that if you just shrink the browser, the sidebar is working properly. If you refresh at the smaller resolution, that's when the issue arises.

Hi jkeeler,

I see now what the issue is. You should modify your html as shown below:

<div class="block block-category-navigation">
            <div class="title">
                <strong>Product Guide</strong>
            </div>            
            <div class="product-catalog listbox">
            <a href="/Content/Images/uploaded/PDFs/CATALOG_WEB.pdf" target="_blank" ><img src="~/Content/images/uploaded/ProductGuideCover_2014.jpg" width="190px" height="245px" /></a>
            </div>
        </div>

You should add the "listbox" class to your second element so that it is hidden by default.

For reference you can have a look at the following css in the 768.css file:

@media screen and (max-width: 768px) and (min-width: 481px)
.block .listbox {
display: none;
}

Hope that helps!