A user asked,
Have you done any tutorials on how to use a custom menu in a widget and make it appear on the page in 3 columns using the column classes?
I searched, but nothing is coming up.
I considered using the uber menu plugin, but that seems heavy for what I am trying to accomplish.
If using three menu widgets in separate widget areas (that are split into columns using column classes) is not an option, then CSS Multi-column layout module can be used. But the problem with it is that it doesn't work in IE 9 and 8. While IE 8 support may be overlooked, many still use IE 9 and hence we are going to use Columnizer jQuery for displaying list items of a single custom menu in 3 (or any other number of) columns as detailed in this article.
In this example we are going to register a 'Before Footer' widget area, display it above the footer (and footer widgets), set up our jQuery and finally drag a custom menu widget into this widget area.
Before:
After:
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:
Hi Sridhar, I tried to install the Columnizer jQuery plugin you posted and received an install error. The tutorial didn’t work for me. I am using the Altitude Pro theme with the latest Genesis and WordPress software.
Unpacking the package…
Installing the plugin…
The package could not be installed. No valid plugins were found.
Plugin install failed.
Return to Plugins page
Hi Rita,
It is a jQuery plugin, not WordPress plugin.
Follow the steps in the above tutorial to load it in your WordPress site.
HI Sridar,
This worked beautifully to create the three columns in the homepage widget, but for responsive, I need it to go to ONE column below 800px. Here is what I added, but it didn’t work.
jQuery(function( $ ){
if ( $(window).width() > 800 ) {
$( "#menu-our-services" ).columnize({
columns: 3,
});
} else {
$( "#menu-our-services").columnize({
columns: 1,
});
}
});
What do you think would work best?
Theresa 😎
Hi Sridar,
Never mind! Apparently this worked, but it wasn’t working until I closed the page and started again (so weird!). I think I’m finally understanding basic Javascript a little better! Thank you for the tutorial!
Theresa 😎