Many times when I am building mega menus and need additional classes to write cleaner CSS I like to add level classes to the WordPress menu items. I like to use a simple PHP function to add classes like .level-0, .level-1, .level-2 to the li depending on its depth from the top most nav item. Not only is my code cleaner, I also don't have to worry about item-id's or using nth-child() on anything.

Add to functions.php:

<?php 
add_filter('wp_nav_menu_objects' , 'level_menu_classes');
function level_menu_classes($menu) {
    $level = 0;
    $stack = array('0');
    foreach($menu as $key => $item) {
        while($item->menu_item_parent != array_pop($stack)) {
            $level--;
        }   
        $level++;
        $stack[] = $item->menu_item_parent;
        $stack[] = $item->ID;
        $menu[$key]->classes[] = 'level-'. ($level - 1);
    }                    
    return $menu;        
} ?>

Filling out forms are the worst. Especially if you have to fill it out cause you have a complaint or if it is mandatory for work. You start tabbing through the form filling out only the necessities just so you can get to the end and submit it. And when you think you are finally at the end of it all and hit submit...the page refreshes and you are staring at the form all over again. What makes this worse if the form is super long or heaven forbid multiple pages. If you are lucky you are scrolled right to the error. If you are not so lucky at least you learned that this isn't the way forms should be and you can update forms on your website to fix this.

Insert jQuery to add scrolling after submission

jQuery( document ).bind( 'gform_post_render', function() {
    var firstError = jQuery( 'li.gfield.gfield_error:first' );
    if( firstError.length > 0 ) {
        firstError.find( 'input, select, textarea' ).eq( 0 ).focus();
        document.body.scrollTop = firstError.offset().top;
    }
} );

Add this into your custom JS file or place it in a <script></script> on the template your Gravity Form is located. You can either call this function in a jQuery(document).ready() or wrap it in a function of your own creation and call it.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram