I'd like to show "shop by" , "Layered nav" in the tablet and mobile mode

Hi.
 
I’d like to use “layerd nav” in the tablet and morbile mode and I thought I could change layout-mobile.Css
and I’m sorry couldn’t find it.
 
Can you let me know how to do?
 
Thank you
Kelly

3 answers

Profile photo of Seoki Lee 1510.00 $tone November 14, 2014
Public

Dear Kelly,
 
To enable “layer nav” on tablet and mobile, please edit files:
1. /skin/frontend/default/jm_travelgear/css/layout-tablet.css
— At the end of file add this rule:

.catalog-category-view .jm-col2-right-layout #jm-col2 {
    display: block;
}

.catalog-category-view .jm-col2-right-layout #jm-col2 .block {
    display: none;
}

.catalog-category-view .jm-col2-right-layout #jm-col2 .block.block-layered-nav {
    display: block;
}

.catalog-category-view .jm-col2-right-layout #jm-main {
    width: 70% !important;
}

2. /skin/frontend/default/jm_travelgear/css/layout-mobile.css
— At the end of file add this rule:

.catalog-category-view .jm-col2-right-layout #jm-main {
    width: 100% !important;
}
.catalog-category-view .jm-col2-right-layout #jm-col2 {
    clear: both;
    float: none;
    margin: 0 10px;
    width: auto;
}

3. /skin/frontend/default/jm_travelgear/css/layout-mobile-portrait.css
— At the end of file add this rule:

.catalog-category-view .jm-col2-right-layout #jm-main {
    float: none;
}

.catalog-category-view .jm-col2-right-layout #jm-col2 {
    margin: 20px 0 0;
}

Note: please backup all files before you edit it and disable your site cache via your site’s backend.

#1
Profile photo of hyeonjoo an 100.00 $tone November 14, 2014
Public

Thx Seoki.

Just need to one more work to show mobile layout.
 
/skin/frontend/default/jm_travelgear/css/layout-mobile.css
 
Line 212 code #jm-col2 is set to not display.
Add /* */ to code like this.
/* .jm-col2-right-layout #jm-col2,
.jm-col2-left-layout #jm-col1 { display: none; } */
 
Done.
 
Thank you.

#2
Profile photo of Seoki Lee 1510.00 $tone November 17, 2014
Public

Dear Kelly,
Yes, but this rule was defined in file  /skin/frontend/default/jm_travelgear/css/layout-tablet.css  so we don’t need re-define it in /skin/frontend/default/jm_travelgear/css/layout-mobile.css

#3

Please login or Register to Submit Answer

Written By

Comments