JQuery plugin
Step 4
At Appearance > Widgets, drag a Custom Menu widget into your widget area and select your desired menu.
Source: http://stackoverflow.com/a/6509239/778809.
// Step 2
// Add the following in child theme’s functions.php:
// Register Before Footer widget area
genesis_register_sidebar( array(
'id' => 'before-footer',
'name' => __( 'Before Footer', 'themename' ),
'description' => __( 'This is the before footer widget area', 'themename' ),
) );
// Display Before Footer widget area
add_action( 'genesis_before_footer', 'sk_before_footer', 7 );
function sk_before_footer() {
genesis_widget_area( 'before-footer', array(
'before' => '<div class="before-footer widget-area"><div class="wrap">',
'after' => '</div></div>',
) );
}
// Enqueue Columnizer
add_action( 'wp_enqueue_scripts', 'sk_enqueue_columnizer' );
function sk_enqueue_columnizer() {
wp_enqueue_script( 'columnizer', get_stylesheet_directory_uri() . '/js/jquery.columnizer.min.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'columnizer-init', get_stylesheet_directory_uri() . '/js/columnizer-init.js', array( 'columnizer' ), '1.0.0', true );
}
// Step 3
// Add the following in child theme’s style.css:
/* Before Footer widget area
------------------------------------------------------- */
.before-footer {
margin-bottom: 40px;
}
.before-footer .wrap {
background-color: #fff;
padding: 40px;
}
// Step 1
// Create a file named say, columnizer-init.js in your child theme’s js directory (create if not existing) having the following code:
jQuery(function( $ ){
if ( $(window).width() > 500 ) {
$( "#menu-long-menu" ).columnize({
columns: 3,
});
}
});
// In the above replace menu-long-menu with the CSS ID of your custom menu by inspecting it in your browser deverloper tools after step 4.