How to show the Mobile Menu on all screen sizes?

[k_b]

Hi Jason

I was wanting to use the mobile menu across all screen sizes i.e. the standard nav wouldn’t appear on desktops etc. I can hide the standard nav with css, would I use a media query to make the mobile nav appear across all screen sizes?

Thanks

Topic

[Jason Bobich]

Hi,

So there’s sort of three parts to this, the first being the more obvious which you’ve already sort of eluded to.

Part 1: You need the mobile menu button to show (that allows the user to toggle to menu). For this, since you’re just wanting it show everywhere, there’s no @media query used. Just apply display:block from your child theme’s style.css, which will override everything before it.

#primary-menu-toggle {
    display: block;
}

Note: This works elegantly because you’re NOT doing the old “CSS hacker” method, as I’ll talk more about in your other topic why it’s a bad idea — In other words, we’re simply overriding everything done above in the theme’s CSS, no matter what media queries were used, previously.

Part 2: With CSS, you need to just hide the main menu everywhere. Since the mobile menu is built with javascript from the outputted main menu, it still needs to be there. So, you just have to hide it.

.header-nav {
    display: none;
}

Part 3: Now at this point everything will seemingly be working, except for you’ll notice that when you change the window size and the panel is open, it will close. Here’s how to fix this from your child theme functions.php:

/**
 * Filter javascript locals, to change 
 * mobile menu's maximum viewport size.
 */
function my_js_locals( $locals ) {
    $locals['mobile_menu_viewport_max'] = '5000'; // some rediculously high viewport
    return $locals;
}
add_filter('themeblvd_js_locals', 'my_js_locals');

---

And fun little tidbit, I’m working on a new theme I’m trying to release this fall on ThemeForest, which has two separate menus locations (main nav and side panel) built in, where there’s actually what I think you’re wanting to accomplish out of the box, styled to look good on the desktop. And then the mobile menu is a separate thing that combines both menus into one.

• This reply was modified 7 years, 9 months ago by Jason Bobich. Reason: Added third part about hiding menu

[k_b]

Thanks Jason for the great detail. I would of struggled would Level 3 but your note above really helps.

Looking forward on seeing the new theme later this year! In my concept I only want to show a minimised menu i.e. the typical mobile menu, see my screenshot: http://postimg.org/image/o6mxvq7wp/

[Jason Bobich]

Awesome, yeah, I think that’s more-or-less the same concept. I notice it’s a trendy thing happening on a lot of sites. You just provide a few important buttons, and then have a larger menu that comes out from the side.

[johnmos]

The “fun little tidbit” will you be adding that capability to JumpStart.

[Jason Bobich]

Probably not because I’m trying to use the framework to create as much of a different product as I can. Sometimes I get caught up in trying to put every same feature, or flavor of the month, in every theme and I have trouble pushing out new products. So I’m trying not to do this.

[johnmos]

Gotcha

[k_b]

Hi Jason,

Is it possible to add in the word ‘Menu’ to the left hand side of the mobile menu button? Would I need to write a function that targeted the #primary-menu-toggle?

Thanks

[Jason Bobich]

Is it possible to add in the word ‘Menu’ to the left hand side of the mobile menu button? Would I need to write a function that targeted the #primary-menu-toggle?

You’d use the filters “themeblvd_btn_navbar_text” and “themeblvd_btn_navbar_text_close” — See the function themeblvd_responsive_menu_toggle() in /framework/includes/display.php

[k_b]

Thanks Jason.

Basically trying this for the first time (as you can tell)

I have written:

/* My Example Filter */

function my_example_filter( $text ) {
    $text = 'Menu';
    return $text;
}
add_filter( 'themeblvd_btn_navbar_text', 'my_example_filter' );

which replaces <i class=”fa fa-bars”></i> , I was hoping to have both the word ‘menu’ and the mobile bars icon but can’t see what I’m missing.

I also tried adding that into my function but it doesn’t display

/* My Example Filter */

function my_example_filter( $text ) {
    $text = 'Menu';
    return $text;
}
add_filter( 'themeblvd_btn_navbar_text', 'my_example_filter', '<i class="fa fa-bars"></i>' );

Am I going in the right direction?

Thanks

[Jason Bobich]

… which replaces , I was hoping to have both the word ‘menu’ and the mobile bars icon but can’t see what I’m missing.

So, you’d make that HTML a part of your string.

$text = '<i class="fa fa-bars"></i> Menu';
return $text;

However, keep in mind that obviously the $text variable you’re passing in is the existing string you’re modifying through your callback function. So, if you want that existing HTML string to remain, why not just append to it?

$text = $text . ' Menu';
return $text;

And then the above two lines can be written different ways…

Like this:

$text .= ' Menu';
return $text;

Or like this:

return $text . ' Menu';

… all means the same thing.

And now that you’re just appending to the original text string (i.e. icon), why not take advantage of that to use the same callback function for both the open and close button?

/**
 * Add "Menu" text to mobile navigation button
 */
function my_btn_navbar_text( $text ) {
	return $text . ' Menu';
}
add_filter('themeblvd_btn_navbar_text', 'my_btn_navbar_text');
add_filter('themeblvd_btn_navbar_text_close', 'my_btn_navbar_text');

• This reply was modified 7 years, 9 months ago by Jason Bobich. Reason: Fixed typo in code block

[k_b]

ahh brilliant 🙂 love learning 🙂

[Odd Egil Hegge Selnes]

Hi,

I have used this brilliant solution a couple of times, but after the last update it does not seem to work anymore. Has there been any changes to ids/classes/js ?

Thanks in advance.

[Jason Bobich]

You’re talking about filtering in the “Menu” text? I just tried the code snippet from above on my end and it still works. You’re sure the text isn’t being inserted?

Or, if you’re talking about having the slide-in menu panel for desktop, this is now built into the framework. You just utilize the new menu locations at Appearance > Menus > Manage Locations.

[Author]

Replies