Use Mobile Menu on Desktop Site

Beaver Builder
1

Hey guys,

Can you tell me how I can use the Mobile (hamburger) Menu on the Desktop site?

I figure it’s just a Media Query, but not sure.

Thanks

2

Hi David,

I am not sure if this is possible. However, I will try and get this working for you, but before I do can you confirm something for me.

Are you referring to the Menu in the BB theme or the Menu module?

Thanks,
Danny

3

Hi Danny,

I’m talking about the Menu module.

Thank,
David

4

Hi David,

Ok, so we got this working for you. To get the hamburger menu to appear regardless of screen width or device. Please, follow the steps below.

  1. Open the page builder and open the settings for your Menu module.
  2. In the Advanced Tab, scroll to the ID field option and add “always-mm” without quotes.
  3. Save the changes and open the Customizer.
  4. Go to Customizer > Code > CSS Code and add the following:
@media (min-width: 768px) {
    #always-mm .fl-menu .menu {
        display: none;
    }
    #always-mm .fl-menu-mobile-toggle {
        display: inline-block !important;
    }
    /* Un-comment if you wish to have
     * your menu listed */
    /*#always-mm .fl-menu .menu li {
        display: block;
        float: none;
    }*/
}
  1. Now to JavaScript Code and add the following:
jQuery( function(){
    
    var wrapper = jQuery( '#always-mm .fl-menu' ),
        menu    = wrapper.children( '.menu' );
        
    wrapper.find( '.fl-menu-mobile-toggle' ).on( 'click', function( e ){
        jQuery( this ).toggleClass( 'fl-active' );
        menu.slideToggle();
    } );
} );

Save the changes and when you refresh the page, the hamburger should be visible and clickable to reveal your menu.

Thanks,
Danny

5

Danny,

I appreciate you guys getting this together, however after following your steps exactly, the Menu toggle is not displaying the menu.

Upon click, nothing happens?

Thanks,
David

6

Hi David,

Can you provide temp admin access, so I can check your code, please. As it certainly works, I tried it before posting :smiley:

Thanks,
Danny

7

[Content Hidden]

8

Hi David,

Can you provide the URL as well, please?

Thanks,
Danny

9

[Content Hidden]

10

Hi David,

What is the name of the Saved module or page where you have added your global Menu module?

Thanks,
Danny

11

http://dev.diaperfreebaby.org/practicing-ec/

12

Hi David,

Thats fixed for you. The issue was you had a line break above the JS code. I removed this and it resolved the problem. You now have a hamburger menu regardless of width.

Thanks,
Danny

13

Do I understand correctly that BB doesn’t have a way for this to work for Menu in the BB theme? I’m trying to get the header to look like it can with the Responsive Menu Pro plugin (with the menu breakpoint size set to 4000-- i.e., the header has the logo image positioned in the absolute center and the hamburger permanently in the upper right, whether desktop, pad, or phone.

Thanks!

14

Hey Jeff,

Adding the CSS snippet below should make the hamburger menu display at all time. You’ll have to adjust the styling though.

.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-collapse.collapse.in {
    display: block!important;
}
.navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

Ben

15

[Content Hidden]

16

Hey Jeff,

Are you referring to how the menu slides out of the left side? Unfortunately, we’re gonna have to change a lot of the theme’s code to make it work like that. Perhaps you can try a 3rd party menu plugin instead. Try checking out ShiftNav. I believe they offer something like that. Sorry I don’t have a better answer for you.

Ben

17

[Content Hidden]

18

No worries at all, Jeff! :slight_smile:

Enjoy BB!

Ben