Flash of unstyled links

[emsgeorge]

I noticed at times that smartmenus show the list items without any styling for a short while, then styling takes effect.

Any fix for this?

Thanks!

[admin]

The simplest fix (that should hopefully work for you too) is to have at least one script linked after the menu CSS in the section of the page. So if you have your scripts linked before the CSS or at the end of the , you may want to move at least one of them after the CSS in the .

Please let me know if you still have any troubles.

[emsgeorge]

Hi,

I have my css before the script for smartmenus in the head section. I placed my smartmenus CSS into my main stylesheet (style.css).

But it’s still having that unstyled issue. Any other insight as to what might be causing the delay? Below is part of the code in the head section. Perhaps you can spot something I missed?

Thanks so much!

[emsgeorge]

Sorry, I tried to wrap my code in pre tags but some of it isn’t showing. If you view source at , you can see the whole head section code. Thank you!

[admin]

Thanks for the sample URL, it helped a lot!

The problem is that you don’t have the “sm” class set to your menu in the source but you add it dynamically on DOMContentLoaded via this line:

jQuery("#menu-main-menu").addClass('sm');

in the following file:

You will need to add the class in the source if you would like to avoid the flash. Since you are using WordPress, you could add the class like this in your theme:

<?php wp_nav_menu( array( 'menu' => '...', 'menu_id' => 'menu-main-menu', 'menu_class' => 'sm' ... ) ); ?>

Please let me know if you still have any issues.

[emsgeorge]

I tried this in my Genesis child theme, but it doesn’t work:

//* Add 'sm' class to menu items for smartmenus javascript to work
function add_menu_class() {
wp_nav_menu( array( 'menu' => 'Main Menu', 'menu_id' => 'menu-main-menu', 'menu_class' => 'sm' ) );
}
add_filter( 'wp_nav_menu_menu-main-menu_items', 'add_menu_class', 10, 2);

What am I doing wrong?

Thanks for your help!

[admin]

I don’t think there is an existing “wp_nav_menu_menu-main-menu_items” filter and as far as I am aware, you wouldn’t be able to add the root Ul element’s class with the existing “wp_nav_menu_items” filter either. So you need to find the file in your theme (header.php?) where wp_nav_menu() is used to render your menu and pass the 'menu_class' => 'sm' option.

[kiarashi]

I have the same problem.
Uploaded an example here:
If you hover over the word “login”, it takes a split second to grab the right styling. This only happens once (after loading the page). If you hover over it again (2nd time) it works just fine. Any idea what I’m doing wrong?

[kiarashi]

I figured it out.
Turns out the problem was caused by my own css code. 🙂

[emsgeorge]

OK, here’s a way to add the class ‘sm’ to a WordPress menu. Just add to your functions.php file:

//* Add 'sm' class to main menu
function smartmenu_wp_nav_menu_args( $args ) {
	$args['menu_class'] .= " sm";
	return $args;
}
add_filter( 'wp_nav_menu_args', smartmenu_wp_nav_menu_args);

[Author]

Posts