Need to find something?

Building-Custom-Mobile-Menu-with-Bricks-Builder

Building Custom Mobile Menu with Bricks Builder

In a recent project, I used the Bricks theme and had to build a custom-designed mobile menu. Later on, I shared my site on the Bricks Community Facebook group in a discussion. Many of the members liked the design and wanted to do something similar with the Bricks theme.

As the process is not straightforward, I decided to write this tutorial and walk through the steps. Hopefully, it will be helpful for you!

What Do You Need?

Definitely need Bricks Theme installed. Better to use the Child Theme activated so you don’t lose changes when the theme gets updated.

You need to be able to make changes to the functions.php file to add some functions and some extra CSS styles as well.

That’s it. 🤔

Let’s Start Building

I assume you already have the header template created and it has the nav menu element.

Set the correct Nav Menu and style the element as you like

Here is the default view of the mobile menu on my demo site

Our purpose is to change this content as if we are editing any other page content with the Bricks Builder.

Create a Template for Mobile Menu Content

We are going to replace the default content of the mobile menu with our own from a template. Add your desired content to the template and save changes.

bricks-builder-custom-mobile-menu-content-template

Now we need to add a function on our child theme’s functions.php file to filter the default mobile menu content.

/**
 * Custom Mobile Menu Content
 */

function bricks_custom_mobile_menu_content($items, $args) {
	if( $args->menu_class == 'bricks-mobile-menu' ) {
		$items = do_shortcode( '[bricks_template id="26"]' );
		return $items;
	} else {
		return $items;
	}
}

add_filter('wp_nav_menu_items', 'bricks_custom_mobile_menu_content', 10, 2);
Code language: PHP (php)

This function will use the template we created as the mobile menu content but keep the original menu content for the desktop version. Make sure to change the template ID I used in the code with the correct one you just built.

Now our mobile menu should be looking like this

Something Missing?

You may be wondering how did I add the menu items (original menu links)?

I used something that will automatically add the menu items for me. Also, with the sub-menu toggle to show or hide sub-menu items. This is done with two more functions.

The first one is a shortcode. This shortcode will allow you to add a menu displayed as a list. Add the following code to functions.php of your child theme to avail the shortcode.

/**
 * Display Menu as Shortcode
 */

function display_menu_shortcode($atts, $content = null) {
	extract(shortcode_atts(array( 'name' => null, 'class' => null ), $atts));
	return wp_nav_menu( array(
		'container'  => false,
		'menu' => $name,
		'menu_class' => 'custom-mobile-nav',
		'walker' => new \Aria_Walker_Nav_Menu(),
		'echo' => false )
	);
}

add_shortcode( 'display_menu', 'display_menu_shortcode' );
Code language: PHP (php)

You will need to use the shortcode like this

[display_menu name="YOUR MENU NAME HERE"]Code language: JSON / JSON with Comments (json)

In my case it was:

[display_menu name="Main Menu"]Code language: JSON / JSON with Comments (json)

You can also pass a custom class if you want.

Please Note

Don’t forget to set icons to the sub menu settings on you Nav Menu element in Header template. That will show on the nav menu link that has children.

Now we are going to add another function that will filter the nav menu item title to add our toggle icons. This also goes to the functions.php file like before.

/**
 * Add arrow on parent menu items
 */

function add_arrow( $title, $item, $args, $depth ){
	if( $args->menu_class == 'custom-mobile-nav' && $depth === 0 ){
		if ( in_array("menu-item-has-children", $item->classes) ) {
			$icon_html = '<button class="bricks-mobile-submenu-toggle icon-right"><i class="mobile-menu-icon-svg close ti-angle-up"></i><i class="mobile-menu-icon-svg open ti-angle-down"></i></button>';
			$title = $title . $icon_html;
		}
	}
	return $title;
}

add_filter( 'nav_menu_item_title', 'add_arrow', 10, 4 );
Code language: PHP (php)

The next thing you need is some custom CSS code added to make it look nice. You can use your own CSS code if you like. Here is mine for a quick start. Feel free to change the variables or any other part to match your design.

:root {
    --mm-a-padding: 30px;
    --mm-sm-link-size: 40px;
}

.custom-mobile-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.custom-mobile-nav ul.sub-menu {
    display: none;
}

.custom-mobile-nav li.menu-item-has-children {
    position: relative;
}

.custom-mobile-nav li.menu-item-has-children a button {
    position: absolute;
    top: 0;
    right: calc( var(--mm-sm-link-size) / 2 );
    font-family: themify;
    font-size: 1rem;
    display: inline-block;
    width: var(--mm-sm-link-size);
    height: var(--mm-sm-link-size);
    text-align: center;
    line-height: var(--mm-sm-link-size);
    cursor: pointer;
    color: #fff;
}

.custom-mobile-nav li a {
    padding: 0 var(--mm-a-padding) !important;
    display: block !important;
    line-height: var(--mm-sm-link-size) !important;
}
Code language: CSS (css)

I hope this tutorial helps you with your future projects. Feel free to share your feedback or if you have any questions.

Please do not republish this tutorial/parts of it, elsewhere without permission.

Last Updated: July 8, 2022

Al-Mamun Talukder

About Al-Mamun Talukder

WordPress Developer. Minimalist Designer. Tech Enthusiast. Music & Movie Freak. Loves Cars. Founder of WolfDevs.

Connect with me: Upwork, GitHub, Facebook, Twitter

6 comments

  • Margarida

    Thank you!

  • Margarida

    Hi,
    thank you so much for your tutorial. It’s great! I’m implementing it in my project.
    Did the 1st part with success. I have questions?
    In Display Menu as Shortcode it’s said:
    You will need to use the shortcode like this
    [display_menu name=”YOUR MENU NAME HERE”]
    Where do i put it? Here?
    add_shortcode( ‘display_menu’, ‘display_menu_shortcode’ ); ?

    And in Add arrow on parent menu items: will this work if you have a sub-sub item, like
    Link
    Sub-link
    Sub-sub-link
    Thank you!

    • A

      Hi Margarida. You need to use the shortcode inside the template that you are going to use for the mobile menu. Unfortunately the arrow does not work on a sub level sub-menu item.

  • This helped me a lot since I don’t consider the current mobile menu of Bricks sufficient. Till the mobile menu builder is rolled out I will now just do this. 🙂

    thanks a lot!

  • is a good tutorial thanks, i know is simple for people who knows about code etc. but some people like me dont know, for example:

    the last code (css) where should i paste it? in the template? in the container on the template? in the general Css (in the backend bricks>css?). maybe sounds stupid but is better to say it because this is the best tutorial i find about this topic.

    also i did everything but when i try the mobile version and click the hamburger button it show like this https://www.iloveimg.com/es/descarga/x8z141lfhw1y2b5c1ybgmsj204qAcqcs61q1fwgn7hjqr2yrjAjgwfc53yrc95t78snl8hl7ctAt0v7n2l74t7qlfprklfq7z0y6yff4rw29smnb8qr9q55tf35324t5qmjj8t823lfvr3g9cf4zsb82mpdxp4bhc2dlwsxbdht1yrjhxdcq/2

    maybe a video would be a better choice, because i have to say it. The off canvas menu you show on your featured image looks Super Awesome, do not take it the wrong way, it is a piece of advice to make it more complete. In the same way, taking the time and contribution is appreciated.

    • A

      You can put the CSS on the Bricks settings page or on ‘Appearance > Customize > Additional CSS’ too. The link you shared does not have any image so I couldn’t check the issue. Let me know if you still have any issue with this.

Leave your comment