Megamenu CSS loading is delayed, temporarily showing vertically stacked links

ownage

Sat, 09/23/2017 - 12:35

Every time I clear my cache and refresh (or visit for the first time), the CSS is delayed on my megamenu, showing vertically stacked links. I suppose after looking at the source and noticing that the module loads FIVE separate CSS files, that would make sense... (Isn't that a bit much?)

Image title

Have you witnessed this delay as well? What is the best way to overcome this? Do I have to combine all of this code and manually input the CSS into the template file (<style>MD MEGAMENU CSS</style>) or my theme CSS (/sites/all/themes/gmsaa/css/gmsaa.css)? The weird thing I don't understand is it is SUPPOSED to load before my theme's CSS, if you see above. What is causing this delay in megamenu CSS, and how do I prevent it from showing stacked links after my site's theme has loaded?

cindy

Mon, 09/25/2017 - 00:11

Please send us your website url, admin account and FTP account so that we could check and fix your issue

cause we check our latest version and see no issue as you reported

ownage

Fri, 09/29/2017 - 20:58

Cindy, that issue has seemingly been resolved, but I have a new loading error now, similar enough that I can keep it under this same topic:

Image title

Any chance you could help?

p.s. I am working on localhost

cindy

Mon, 10/02/2017 - 00:57

Hi,

Please check your email. Download and extract, replace with your current code and clear Drupal cache

(you do not have to uninstall module to advoid losing data)

ownage

Mon, 10/02/2017 - 17:42

Cindy, thanks for your reply. I was hopeful that your solution was intended to fix this loading issue, but that doesn't look to be the case.

Every refresh has the same loading behavior with this version, except for a couple new issues:

themes.css is now overriding my theme selection, where it must not have been before, because this version has put a white background with an ugly teal hover color over my menu, regardless of my previous selection to use theme 3..... To prevent this, I commented out the include of this CSS file in md_megamenu.module....
The "real deal breaking difference" that will even cause me to revert to the prior version: hovering over the links now takes a half section to show the megamenu. It used to be instant. To troubleshoot, I turned off transitions in the configuration and that caused the megamenu to never even appear on hover anymore, even though the Menu Trigger is still set to the default Hover..... :(

So we have gone from one to three issues. Any insight, help, or suggestions you can offer?

cindy

Mon, 10/02/2017 - 23:27

Hi Ownage,

It is difficult and inconvenient for us to check and fix your issue with just your description. We would like to check this problem directly.

First, please revert to the prior version. And
1) Upload your site to an online free host and send us admin and ftp account

or
2) Export your siteincluding code module, theme, images,database, ... and send us the zip file
We will check to fix this issue

ownage

Tue, 10/03/2017 - 12:55

Cindy, just reverted to the prior version and I'll do that first option... I've got to upload about 2GB on crappy WiFi though so this might take a few hours. What email do you need the credentials sent to? I appreciate your help...

cindy

Tue, 10/03/2017 - 22:30

Hi,

You can send us via email [email protected]

Thank you!

cindy

Thu, 10/05/2017 - 07:02

Hi,

We checked your dev site:

1) We updated version md_megamenu 7.x-1.24. Later, if you update new version and see white background, please open file md_megamenu/templates/menu/theme.inc and search function md_megamenu_preprocess_md_megamenu, then comment class 'awemenu-default' as follow:

$menu_classes = array_merge($menu_classes, array(
    //'awemenu-default',
    'awemenu-'.$menuType,
    $style, $mobileStyle
  ));

2) With new version, you can override css as normal. Please note that css for style 3 in this version is different from old version

Thus, your custom css is not enough. You have to override css more. We have added css at the bottom of file theme css gmsaa.css as follow:


/* ########### fix for mega menu ################# */
#section-header .md-style3.awemenu-standard .awemenu > .awemenu-item.awemenu-active-trail > a,
#section-header .md-style3.awemenu-standard .awemenu > .awemenu-item > a{
    background: none;
    font-size: 16px;
    text-shadow: 1px 1px 0 #000;
}
#section-header .md-style3.awemenu-standard .awemenu > .awemenu-item > a > .awemenu-arrow{line-height: 100px;}
#section-header.fixed-transition .md-style3.awemenu-standard .awemenu > .awemenu-item > a > .awemenu-arrow{line-height: 54px;}
#section-header .md-style3.awemenu-standard .awemenu > .awemenu-item .awemenu-submenu{
    background: #104715 url(/sites/all/themes/gmsaa/images/green_noise.png) repeat;
    -webkit-border-radius: 0 0 15px 15px;
    border-radius: 0 0 15px 15px;
    -webkit-box-shadow: 0px 5px 6px rgba(0, 0, 0, .6);
    -moz-box-shadow: 0px 5px 6px rgba(0, 0, 0, .6);
    box-shadow: 0px 5px 6px rgba(0, 0, 0, .6);
    padding: 0;
    border: none;
}
#section-header .awemenu-nav.md-style3 ul li a, .awemenu-nav.md-mobile-style3 ul li a {
    font-size: 16px;
}
#section-header .awemenu-nav.md-mobile-style3 ul li a{
    color: #fff;
    font-family: 'timeless-bold' !important;
    text-decoration: none;
    text-shadow: 1px 1px 0 #000;
}
/* ################ end fix mega-menu ############# */

3) We see that you edited file md-megamenu-style.css. Please do not edit file css directly in module md_megamenu, because your modification will lost when update.

4) About the error that the arrows appear first before displaying menu item text, we checked our core but see no problem, so the problem might comes from your website. As you can see these two screenshots:

https://1drv.ms/i/s!ArRPkgVQNPYZgWz8zpD_iloj7GUL

and

https://1drv.ms/i/s!ArRPkgVQNPYZgW0FDeuVyTOr7yZP

You can see that menu item text, content block welcome, block title of sidebar left also do not display in a short time. So, this could not a big problem

5) You always should use the newest version of Megamenu because it has bugs fixed. You can go to config megamenu to set different animation as well as set animation duration.

Now please check and override css if neccessary. When you change menu type or predefined styles, you should override css properly

ownage

Thu, 10/05/2017 - 12:05

#10

Cindy,

Thank you for the help. Troubleshooting continues, however, as the new version still presents the following new issues:

Upon hover, it takes a half second for the megamenu to appear. The prior version was instantaneous. How can this be sped up like before?
Disabling Animations (None) breaks the megamenu. I want to do this because the Fade Down animation starts too high-- this distractingly covers my header's yellow border during the animation. This is part of the reason I wanted to disable animations, knowing jQuery is likely at fault.
Re: your #4 above, please do a simple refresh (F5) on my dev site... you will see everything has loaded from the DOM & Cache... but the LAST thing to appear on the page is the Mega Menu link text.

Could you please help?

Thank you!!!

cindy

Fri, 10/06/2017 - 06:37

#11

Hi,

1) The prior version has problem that animation does not work when showing submenu. In this new version, animation problem is fixed so submenu appears after a while. You go to config megamenu => animation => set duration, default 500ms. If you do not want animation, just select None and set duration = 0.

2) You do not want animation fade down, you can choose another animation effect. In case you choose None for animation, we edited file md_megamenu/js/awemenu.min.js, now megamenu shows submenu when hover.

3) We scroll down page to show more content, and do a simple refresh (F5).
Please check https://1drv.ms/i/s!ArRPkgVQNPYZgXDV46N8HyYmwVHe
The result is different from 2 screenshots last time
some block titlte displays immediatedly like 'GMSAA News' and 'INFO ON SPRING TRIP TO ARUBA', however, it still takes a while to show its content.
It means that not everything are loaded from DOM & Cache.
We have tested some other drupal sites, when doing a simple refresh (F5), the site content display immediatedly,

This problem may come from your site

ownage

Fri, 10/06/2017 - 12:01

#12

Hey Cindy.

We reverted to v1.24's revised awemenu.min.js and though it has fixed the "None" animation option, the half-second delay persists upon hover - which if you've read this thread - is the new ultimate deal-breaker. This issue started in the newest version so was not present in the old version.

5) You always should use the newest version of Megamenu because it has bugs fixed.

I'm really sad to say this new version has only presented more issues. This also includes the initial "loading delay" issue that Mega Drupal for some reason has failed to recognize-- here is a screengrab of me doing a simple refresh using the newest Chrome browser:

Image title

I don't think we should stick our heads in the sand here... Is there any help Mega Drupal can offer? Otherwise I will unfortunately find myself reverting to the prior version in realization that I've wasted hours setting up this dev site and reporting these issues without resolution... :(

cindy

Fri, 10/06/2017 - 22:45

#13

Hi,

We figure out the reason. You use a different font for your menu (timeless-bold)

When loading site, font timeless-regular (which you use for site content) is loaded first, then font timeless-bold (which is used for menu) is loaded later

You can check file gmsaa.css in folder /home/megadrupal_gmsaa_dev/gmsaa.matt.mw/sites/all/themes/gmsaa/css/

line 3174
You can try to replace font timeless-bold in menu with font timeless-regular, you will see the menu appears at first

ownage

Sat, 10/07/2017 - 01:48

#14

Cindy & Mega Drupal Team,

Thank you for that discovery-- that did in fact appear to be a custom font issue, so I'm happy to report that the original issue of this thread has been resolved.

However, do you advise I downgrade to the previous version in order to eliminate the megamenu hover delay, or is this something your team can fix in the new version?

Thanks

cindy

Sat, 10/07/2017 - 06:15

#15

Hi,

You can check in Configure - genneral - Hover active time

We replace 500ms with 0ms

ownage

Sat, 10/07/2017 - 09:49

#16

Cindy,

Thanks... Could you try this solution? I believe I had and the half-second delay upon hover continued...

Thank you

cindy

Mon, 10/09/2017 - 04:27

#17

Hi,

We have checked again but see no error

the submenu appears immediatedly after you hover over menu item

ownage

Tue, 10/10/2017 - 22:31

#18

Thanks Cindy,

That did it! I was unsure because the last time I had turned Hover Active Time to 0 was in the prior version so it looks like that was also fixed in the new release.

Thanks Mega Drupal, I think all of this has been resolved now!

Megamenu CSS loading is delayed, temporarily showing vertically stacked links

Have More Idea?

We are here to build your website!

Megamenu CSS loading is delayed, temporarily showing vertically stacked links

You are here

Have More Idea?

We are here to build your website!

Welcome back, Buddy!

Hi New Comer!