How to Develop Mega Menu in WordPress

How to Develop Mega Menu in WordPress

wprocket

In this post, you are going to learn to develop a mega menu in WordPress. The image above is the example of the mega-menu we are going to build.

If you google for mega menu WordPress, you’ll get tons of plugins for this solution. But we tried something custom & different, which results from a summation of choices.

WordPress Mega Menu Developing Plan and Tools

Mega Menu ExampleIf you notice items of the menu, you’ll see three elements for each item. For example, the first item under Resume menu has an icon image, description, and the item name.

We used the following theme and plugins during the development:

  1. Genesis Framework (with child theme)
  2. Menu Item Custom Fields

Step 1

At first download, the Men’s Item Custom Fields plugin from GitHub and extract the file. Now we need to install the plugin on our site. Here is how you can install a WordPress plugin.

Step 2

On this step, copy the menu-item-custom-fields-example.php and rename it to custom-menu-fields.php and open it with your favorite code editor. Scroll down, you’ll see:

self::$fields = array(
    'field-01' => __( 'Custom Field #1', 'menu-item-custom-fields-example' ),
    'field-02' => __( 'Custom Field #2', 'menu-item-custom-fields-example' ),
);

[thrive_text_block color=”note” headline=””]As per our needs we just change ‘Custom Field #1’ to ‘Icon URL’ and comment ‘Custom Field #2’ and then save the file.[/thrive_text_block]

self::$fields = array(
    'field-01' => __( 'Icon URL', 'menu-item-custom-fields-example' ),
    // 'field-02' => __( 'Custom Field #2', 'menu-item-custom-fields-example' ),
);

Step 3

Now create a new directory named inc in your theme and upload the file(custom-menu-fields.php) to that directory. Open your theme’s functions.php file and add the following snippet.

//* Custom Menu Item Fields
include( get_stylesheet_directory() . '/inc/custom-menu-fields.php' );

Custom Fields for Menu ItemNow, go to Appearance >> Menu >> Screen Options. Tick on Description Icon URL. We got two new custom fields for menu items for two elements.

wprocket-728x98_Black

Step 4

If you test, you’ll see any given value will be saved in those fields. Now time to execute the data on the front. Open functions.php and add the following snippet.

// Show Menu Items Description
function prefix_nav_description( $item_output, $item, $depth, $args ) {

    $icon_url = get_post_meta( $item->ID, 'menu-item-field-01', true );
    if ( !empty( $item->description ) ) {

        $item_output = str_replace( $args->link_after . '</a>', '<p class="menu-item-description">' . $item->description . '</p>' . $args->link_after . '</a>', $item_output );

    } 
    if ( !empty( $icon_url ) ){

        $item_output = str_replace( $args->link_after . '</a>', '<div class="icon-img-wrap"><img src="' . $icon_url . '"></div>' . $args->link_after . '</a>', $item_output );

    } 
    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'prefix_nav_description', 10, 4 );

Mega Menu Genesis ThemeIt is how it is showing now after adding a description and icon URL to menu items on the frontend.

Step 5

Add the following CSS to style.css file of your theme to style and fix some alignments of the mega menu.

/* Mega Menu */
.genesis-nav-menu .menu-item:hover {
    position: relative !important;
}
.genesis-nav-menu .menu-item a {
    padding: 1.5rem 3.3rem !important;
}
.genesis-nav-menu .sub-menu a {
    padding-left: 4rem !important;
}
.menu-item-has-children > a > span:before {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 1.8rem;
    display: block;
    width: 0;
    height: 0;
    margin-top: -.2rem;
    border-color: #676b78 transparent transparent;
    border-style: solid;
    border-width: .4rem .4rem 0;
    content: "";
    transition: -webkit-transform .25s cubic-bezier(.45,.05,.55,.95) 0ms;
    transition: transform .25s cubic-bezier(.45,.05,.55,.95) 0ms;
    transition: transform .25s cubic-bezier(.45,.05,.55,.95) 0ms,-webkit-transform .25s cubic-bezier(.45,.05,.55,.95) 0ms;
}
.genesis-nav-menu .menu-item-has-children a:hover span:before,
.genesis-nav-menu .sfHover > a span:before {
    border-top-color: #00f !important;
    -webkit-transform: rotate(180deg) !important;
    transform: rotate(180deg) !important;
}
.menu-item-has-children {
    position: relative;
}
.nav-primary .genesis-nav-menu a .menu-item-description {
    white-space: normal;
    font-size: 1.4rem;
    font-weight: 400;
    transition: color .25s cubic-bezier(.45,.05,.55,.95) 0ms;
    color: #888;
    margin-bottom: 0px;
    margin-top: 5px;
}
.menu-item.first .icon-img-wrap {
    position: absolute;
    display: block;
    top: 10px;
    left: 0;
    width: 100px;
    height: 100px;
}
.icon-img-wrap {
    position: absolute;
    display: block;
    top: 13px;
    left: 0;
    width: 45px;
    height: 45px;
}
.icon-img-wrap img {
    padding: 10px;
}

Conclusion

Looking forward to your comment and let us know how far you have abled to achieve of developing WordPress mega menu.

You will love The following tutorials:

GenesisPro728x90

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on tumblr
Tumblr
Anwer Ashif

Anwer Ashif

Founder of RainaStudio. Help businesses and individuals to create and outstand their online presence. Our success rate is measurable. Our blog served all around the world and counting.

Leave a Reply

Your email address will not be published.

Want to speed up WordPress site?