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
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.
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.
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