Problem with Dropdown Menu

Dear Team,

I found an issue with the dropdown menu in storefront template. The last subitems located in the second menu item "Woman" is showing on another row most of the times.I'm talking about the only subitem showing a picture. It happens randomly only in "Woman", and never in "Men", across browsers. PLEASE CHECK THE ATTACHMENT (situation 1 "good", situation 2 "bad").

You can check it also in your demo version https://demo.gavick.com/joomla25/storefront/ using firefox. If you check it soon you will experience the mentioned problem.

Please send me instruction to fix it,


Marco

Hi

Looks ok when I check. Please see screenshot. What browser are You using and what is a width of Your screen. It can be related. Also tell me the url to Your site.

Forgot to add screenshot.

Dear Teitbite,

please could you have a deeper look on that ? As I wrote previously, this problem happen with all browser but randomly.
Now, I'm going to attacch two screenshots of your demo version online while I browsed it by google chrome latest version.

Try to use two monitors and to change resolution and browsers during your test, you will soon experience the problem,

Best,

Marco

Hi

Sorry, but I was trying really hard in FF, Chrome and Safari. Resizing browser, reloading in different widths and I cannot force this issue to appear. I believe it may happen if site is not fully loaded thought and scripts are not there to position it properly. Maybe Your firewall is blocking some script. I've shown this to programmers and they had not experience it either.

Anyway try edit /js/gk.menu.js and at the very first line replace "ready" with "load". It may help if it's because of bad connection or blocked script problem.

http://g.recordit.co/khZVKGCgvp.gif

Dear Teitbite,
Thanks for your answer. I' m going to act as you suggest. ? I've noticed that if I add a bigger image in k2 item, also the image loaded in subitem menu lookes affected in size. This might further contribute to trigger the problem?
I can I force it to a specific size? Please let me know how to do it and I will let you know if things are going to be better!
Thanks,

Rob

Well, I've done all you suggest but I had no success. I tried also to resize image, to disable other plugins (in case of conflicts) but with no luck. I will check it soon using another connection and If it won't solve I will upload the site online so you will be able to check it properly.
Best,

Rob

Hi

Ok. I'll be waiting than.

Hi Teitbite,

I've sent to you by private message more information to get deeper in this issue,
Best,

Rob

Hi

Sorry, but it's still the same. Module is showing correctly all the time in sub menu. I really do not know why it's not working for You. For the image quality I see You are using generic type of images at the moment, try to switch to create thumbs from Large image in NSP's additional settings for K2, so quality should be much better.

Hi Teitbite,

I've checked it now again using different pc, different connections, different browsers and that menu shows everytime items in a different position, sometime even totally collapsed.

The problem is that it is not working for me, and for people I showed the website on which I'm working for several months.
This is a serious issue and if it won't be solved I won't be able to publish it online.
I showed you the screenshot of the issue,

Please let's get deeper on this, otherwise I will lose the entire project, I really need to fix it,

Best,

Rob

Hi

Ok. I've just used my wife's computer and surprise no problem here as well. I really do not know why it's showing broken for You.

My skype login it "teitbite", please contact me so we will share screen and I will see what is wrong on Your computer directly.

Thanks a lot Teitbite,
I've added you on skype,
Best,

Rob

Hi

After some time on Skype we used this code :

Code: Select all

<script type="text/javascript">(function($) {$(document).ready(function() {
function setMenuWidth() {
   if( $('.childcontent-inner').size() > 0 ) {
      $('.childcontent-inner').each(function(){
         var thiswidth = 4;
         $(this).find('.gkcol').each(function(){
            thiswidth += 170;
         });
         $(this).parent().width(thiswidth);
      });
   } else {
      setTimeout(setMenuWidth,50);
   }
}

$(setMenuWidth);
});})(jQuery)</script>


also removing lines from file gk.menu.js

Code: Select all

                  'width' : widthAnim ? 0 : prevw,


and

Code: Select all

                  'width' : prevw,


Yes finally the big issue is solved!
Thanks to the great support of Teitbite,
great!

Hello, I have the same problem.
Where I have to put the code?

regards,
Hernan

Hi

After some time on Skype we used this code :

Code: Select all

<script type="text/javascript">(function($) {$(document).ready(function() {
function setMenuWidth() {
   if( $('.childcontent-inner').size() > 0 ) {
      $('.childcontent-inner').each(function(){
         var thiswidth = 4;
         $(this).find('.gkcol').each(function(){
            thiswidth += 170;
         });
         $(this).parent().width(thiswidth);
      });
   } else {
      setTimeout(setMenuWidth,50);
   }
}

$(setMenuWidth);
});})(jQuery)</script>


also removing lines from file gk.menu.js

Code: Select all

                  'width' : widthAnim ? 0 : prevw,


and

Code: Select all

                  'width' : prevw,


Hi

This first code needs to be placed in /layout/blocks/head.php file. At the very end of this file to be precise.

Hi,
I get syntax error in the first line of code:

"<script type =" text / javascript "> (function ($) {$ (document) .ready (function () {"

You could review it?

Hi

Line is correct. Make sure a PHP code above it is closed with "?>"

Hi!

If I upgrade to version 3.18 this problem would be solved?
greetings
Hernan

Hi

This version does not include this fix yet, so I would advice to wait a little bit longer or update and than add the changes we have made again.

Hello!

I used this post to fix the menu, but now the menu shows me an empty right column. I send a sceenshot.

This empty column is displayed only if I have 2 levels of submenu on a menu item. See the screenshot.
If I remove the menu item from level 2, the empty column disappears.

Could you please help solve this problem?

Regards,
Hernan

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

Hi, I send you PM.
Thanks!

Hernan

Hi

I'm afraid I have no idea why it does not work for You. I've been trying to find the issue, but I will need an access to ftp to help with this problem. Can You please send it to me ?

Hi, I send you PM.

Hernan

Hi

Ok. After some dumps I see that my code was counting every column in sumbenu even the ones which were in the lower levels. This is how this extra space got there. A fix to it is just one extra char.

Code: Select all

<script type="text/javascript">(function($) {$(document).ready(function() {
function setMenuWidth() {
   if( $('.childcontent-inner').size() > 0 ) {
      $('.childcontent-inner').each(function(){
         var thiswidth = 4;
         $(this).find('> .gkcol').each(function(){
            thiswidth += 170;
         });
         $(this).parent().width(thiswidth);
      });
   } else {
      setTimeout(setMenuWidth,50);
   }
}

$(setMenuWidth);
});})(jQuery)</script>


You are a genious! It was solved.

could you report this error to developers to include it on the next version of the template?

Greetings and thank you very much!
Hernan

Hi

They know about this issue already. Unfortunately it happens rarely on some servers only, so they said the script will be rewritten from scratch. My fix is just a a temporary solution till it will be resolved.

Hi

For the jomsocial side menu fix try use this code:

Code: Select all

<script type="text/javascript">(function($) {$(document).ready(function() {
$(window).scroll(function(){
if( $(window).width() > 580 ) {
$('.joms-menu').css('margin-top','0');
} else {
$('.joms-menu').css('margin-top',$(window).scrollTop()+'px');
}
});
});})(jQuery)</script>


Many Thanks Teitbite for your solution and support.
I would only suggest to change in gk.menu.js (first line) this code:
jQuery(window).load(function() {

to

jQuery(window).ready(function() {

so the dropdown menu will show up correctly from the beginning

I'm sorry to open again this topic, but this issue is still not solved. I found that the current FIX negatively affects all the other menu items.
Indeed the current Fix will add extra space to the dropdown menu associated to all the other menu item.
For example "template" item whose subitems in my case are ""pages", " featured" and "typography" is showing a dropdown of 1024 px, while it should be 513px (3 column , where each column is 171 px wide).
1024 is exactly twice 513.This issue is happening on both university and storefront template.

The FIX is good for the menu item that shows the issues, but is going to hurt the dropdown of all the other menu items.
I know that you guys can't replicate the issue on your server, thus it makes difficult to solve this serious issue.
What do you suggest to do?

university2.png

Hi

Please send me an access to Your site. None of the accesses I had is working now. You can send it via PM or on Skype. I see You were writing there ;/ I left Skype to live on it's own, since I had too much work. Sorry for that ;/

Hi, I install the kickstart version 3.19 and have this problem in the menu.
It may be that they have not included?

Regards,
Hernan

Hi

Yes it's possible it was not included. As I said before this problem only happens on some servers with a specific configuration, so they may not have an access to one with this problem to work with this. It's showing correctly on most of the installations, so it's hard to figure out what is causing it.

Just use the script provided in this thread to override it.