This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

How to show the Mobile Menu on all screen sizes?

  • Creator
    Topic
  • #22877
    k_b
    Participant

    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

Viewing 13 replies - 1 through 13 (of 13 total)
  • Author
    Replies
  • #22894
    Jason Bobich
    Keymaster

    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 5 years, 10 months ago by Jason Bobich. Reason: Added third part about hiding menu
    #22907
    k_b
    Participant

    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/

    #22914
    Jason Bobich
    Keymaster

    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.

    #22922
    johnmos
    Participant

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

    #22924
    Jason Bobich
    Keymaster

    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.

    #22925
    johnmos
    Participant

    Gotcha

    #23075
    k_b
    Participant

    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

    #23078
    Jason Bobich
    Keymaster

    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

    #23084
    k_b
    Participant

    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

    #23090
    Jason Bobich
    Keymaster

    … 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 5 years, 9 months ago by Jason Bobich. Reason: Fixed typo in code block
    #23097
    k_b
    Participant

    ahh brilliant 🙂 love learning 🙂

    #26004

    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.

    #26006
    Jason Bobich
    Keymaster

    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.

Viewing 13 replies - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.