Flash of unstyled links

Home Forums Older releases 0.9.x Flash of unstyled links

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1335
    emsgeorge
    Participant

    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!

    #1622
    admin
    Keymaster

    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.

    #1624
    emsgeorge
    Participant

    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!

    #1625
    emsgeorge
    Participant

    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!

    #1627
    admin
    Keymaster

    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.

    #1629
    emsgeorge
    Participant

    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!

    #1630
    admin
    Keymaster

    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.

    #1634
    kiarashi
    Participant

    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?

    #1635
    kiarashi
    Participant

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

    #1641
    emsgeorge
    Participant

    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);
    
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?