kawamono

Problem Solved

Any help? Thanks a lot

My website is http://kawamono.com I'm using prestashop 1.6.11, using default theme, image 01 show the product image slider have 4 image ( totally i have 5 image ), the 5th image will appear when i click the ">" button ( green circle ). IMAGE01 ( The red frame ) image 02 show the 5th image, this is normal and good, the problem start from responsive theme. IMAGE02 ( The red frame ) At image 03 show the responsive theme, normally, because of the resolution, the image slider only show two boxes thumbnails plus a ">" button, that's good and acceptable. IMAGE03 ( The red frame ) When i click the ">" button, then it turns to 3rd and 4th image like image 04. IMAGE 04 ( The red frame ) Now, the problem is appear, the 5th image will not be show because the ">" button is gone...( Green circle ), i open chrome brower DevTools ( F12 ) and check the missing ">" button show by image 05. IMAGE 05 ( The red frame ) There will see the html code marked by green area : style="cursor: default; opacity: 0; display: none;" I figure out this maybe the problem from javascript, but i don't know how to fix this, and i try to modify the code in the DevTools like this : style="cursor: default; opacity: 1; display: block;" Then the ">" button appear again like image 06. IMAGE 06 ( The red circle ) After that, i click the ">" button, and the 5th image is show like image 07 IMAGE 07 ( The red frame ) I just wonder how can i fix this, which file i need to modify? I really need for help, Thank you very much.

Hi all, Sorry for my poor english, my webpage is kawamono.com, i don't know what happen that it need to wait 5+ sec. white page before display the webpage... Is it my host service problem? i'm using inmotionhosting. Or Do i need to switch "Yes" at Prestashop Advanced Parameters > Performance > CACHING ( Bottom Selection ) > Use cache ? Also i have a Paid Plan of Cloudflare , would it be affect my webpage loading time ? or not compatible with some setting? And i have prestaspeed module too..... if i using prestaspeed module " Optimize css / js " function, do i need to enable Prestashop Default CCC (COMBINE, COMPRESS AND CACHE) too? When i use these Service & Module, i never regenerate my .htaccess, do i need to regenerate again? I'm a newbie on Web, hope for help! Thank you very much. Best Regards, Raymond

Yes, Hello Vekia. I often browsing the forum every week. Mostly, you always share your concept and solution to someone who want to get the answer, so i keep watching on it. And yes, i want to add the Icons to the sub-menu as similar as the Demo " After.jpg " But i dunno how to start . Maybe in blocktopmenu.css first?

Hello all, How can i edit my Sub-menu style from " Before.jpg " to " After.jpg "? Since i found a jQuery script code from vekia that to generate class to all <li> elements at blocktopmenu.tpl Unfortunately, i'm not really understand how to use font awesome, but i know the concept. Please see the attachment: The red area is my recent theme, and i want to change it more clean and functional. And here's my website link : http://kawamono.com Thank you very much if you can spent time to help me ~ P.s. below there is my superfish-modified.css /*** ESSENTIAL STYLES ***/ .sf-contener { clear: both; float: left; width: 100%; } .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu { position: relative; padding: 0; width: 100%; //border-bottom: 1px solid #e9e9e9; background: #ffffff; margin: 0 auto; } @media (max-width: 767px) { .sf-menu { display: none; } } .sf-menu ul { position: absolute; top: -999em; background: white; } @media (max-width: 767px) { .sf-menu ul { position: relative; } } .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu > li { float: left; //border-right: 1px solid #d6d4d4; //margin-bottom: -3px; } @media (max-width: 767px) { .sf-menu > li { float: none; position: relative; border-right: none; } .sf-menu > li span { position: absolute; right: 6px; top: 20px; width: 30px; height: 30px; z-index: 2; } .sf-menu > li span:after { font-family: "FontAwesome"; content: "\f067"; font-size: 26px; } .sf-menu > li span.active:after { content: "\f068"; } } .sf-menu > li > a { font: 600 11px/13px "Open Sans", sans-serif; text-transform: uppercase; color: #484848; display: block; padding: 10px 15px; //border-bottom: 3px solid #e9e9e9; } .sf-menu > li.sfHover > a, .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a { //background: #333333; border-bottom-color: #666666; color: #ff32ab; } .sf-menu li li li a { display: inline-block; position: relative; color: #777777; font-size: 13px; line-height: 16px; font-weight: bold; padding-bottom: 10px; } .sf-menu li li li a:before { content: "\f105"; display: inline-block; font-family: "FontAwesome"; padding-right: 10px; } .sf-menu li li li a:hover { color: #333333; } .sf-menu li ul { display: none; left: 0; top: 28px; /* match top ul list item height */ z-index: 99; padding: 12px 0px 18px 0px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px; } @media (max-width: 767px) { .sf-menu li ul { top: 0; } } .sf-menu li li ul { position: static; display: block !important; opacity: 1 !important; background: none; -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; } .sf-menu li li li ul { padding: 0 0 0 20px; } .sf-menu li li li ul { width: 220px; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 200px; /* match ul width */ top: 0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 200px; /* match ul width */ top: 0; } .sf-menu > li > ul { padding: 26px 30px 31px; width: 100%; } .sf-menu > li > ul > li > a { text-transform: lowercase; font: 600 11px/13px "Open Sans", sans-serif; color: #333333; } .sf-menu > li > ul > li > a:hover { color: #b1b1b1; } .sf-menu > li > ul > li { float: left; width: 20%; padding-right: 15px; } @media (max-width: 767px) { .sf-menu > li > ul > li { width: 50%; } } @media (max-width: 479px) { .sf-menu > li > ul > li { width: 100%; padding-bottom: 20px; } } @media (min-width: 768px) { .sf-menu > li > ul > li.first-in-line-lg { clear: left; } } @media (min-width: 480px) and (max-width: 767px) { .sf-menu > li > ul > li.first-in-line-xs { clear: left; } } .sf-menu > li > ul > li#category-thumbnail { width: 100% !important; float: none; clear: both; overflow: hidden; padding-right: 0; } .sf-menu > li > ul > li#category-thumbnail > div { float: left; padding-left: 10px; width: 33.333%; } @media (max-width: 479px) { .sf-menu > li > ul > li#category-thumbnail > div { width: 100%; padding-left: 0; padding-top: 10px; text-align: center; } } .sf-menu > li > ul > li#category-thumbnail > div:first-child { padding-left: 0; } .sf-menu > li > ul > li#category-thumbnail > div img { max-width: 100%; display: block; } .cat-title { display: none; } @media (max-width: 767px) { .cat-title { display: block; font: 600 18px/22px "Open Sans", sans-serif; text-transform: uppercase; color: #484848; display: block; padding: 17px 20px; border-bottom: 3px solid #e9e9e9; background: #f6f6f6; position: relative; } .cat-title:hover { background: #333333; border-bottom-color: #666666; color: white; } .cat-title:after { display: block; font-family: "FontAwesome"; content: "\f067"; position: absolute; right: 15px; top: 18px; font-size: 26px; } .cat-title.active:after { content: "\f068"; } } .sf-menu li.sf-search { border: none; } .sf-menu li.sf-search input { display: inline; padding: 0 13px; height: 30px; line-height: 30px; background: white; margin: 13px 10px 0 0; font-size: 13px; color: #9c9b9b; border: 1px solid #d6d4d4; }

Hello all, The is my first time to post a topic here. Problem from my website: When i mouse hovered the product at " New Arrivals ", the third container grid bounce down, this issue appear from FIREFOX and INTERNET EXPLORE but normal from Chrome. Can you help me fix this problem? Thank you very much! My website link : http://kawamono.com Sorry for my poor english.

Hello all, The is my first time to post a topic here. Problem from my website: When i mouse hovered the product at " New Arrivals ", the third container grid bounce down, this issue appear from FIREFOX and INTERNET EXPLORE but normal from Chrome.Can you help me fix this problem? Thank you very much! My website link : http://kawamono.com Sorry for my poor english.