[Resolved] Trigger Mobile Menu at different screen width

[Adam]

Hello,

I have made a Secondary Menu and placed it in the left sidebar widget. It looks good on a desktop sized screen but I would like to trigger the mobile menu at a different width so that it fits better.

I did see these articles about changing the mobile menu trigger width but I am wanting to target a single page with it only?
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width
https://docs.generatepress.com/article/generate_mobile_menu_media_query/

I am also wanting the mobile menu to be this secondary menu instead of the main menu, once again only on one page.

Just wondering the best way to accomplish this.

Thank you,

[David]

Hi there,

just to be clear, do you want the Menu placed in the left sidebar to switch to a Hamburger at a certain screensize?

[Adam]

Yes that is exactly what I am after David but I want it to happen on a certain page only.
I also want to hide the normal main menu at that screen size as I didn’t want to deal with 2 hamburger menus.

Thank you,

[David]

Ok. Can you add the Menu to the Secondary Navigation and set its Customizer > Layout > Secondary Navigation –> Location to after header.
Keep the sidebar menu as you have it now. So effectively there will be a double menu for it.

Then create a new Layout Element in Appearance > Elements.
Disable the Secondary Navigation.
Set the Display Rules -> Location to: Entire Site. Set the Exclude to the page you want it displayed.

Once thats done, let me know and ill provide the CSS to hide / show stuff.

[Adam]

Thanks for your help David.

I have made those changes so now the secondary navigation menu is displayed on the sidebar as well as below the main menu, only on this specific page.

Now I just need to trigger that secondary menu to display as a hamburger style mobile menu at a specific breakpoint/screen size.
At that point the sidebar menu and normal primary menu would be hidden to keep things clean/easy to navigate.

Thank you,

[Ying]

The secondary navigation should automatically switch to a hamburger icon on mobile, just like the primary navigation does.

You currently have this CSS which hides the hamburger icon for secondary navigation on mobile:

@media (max-width: 768px) {
 .secondary-navigation .menu-toggle 
 {
display: none; 
 }
}

And the secondary navigation color is set to white which is the same as the background, you can change the color at customzier > colors > secondary navigation.

[Adam]

Hi Ying,

I am actually trying to trigger that secondary navigation at a specific width, on a specific page. As I was saying I want to control when the menu switches from the sidebar to the hamburger/mobile style, and I want it to only happen on this page.

Thank you,

[Fernando]

Hi Adam,

The code mentioned by Ying is hiding the Secondary Menu on widths within 768px. Then, once you remove that code and modify the color as mentioned by Ying as well, it should appear as such on your breakpoint:

https://share.getcloudapp.com/E0uyn869

Now, once you’ve done that, you can add this CSS in Appearance > Customize > Additional CSS:

@media (max-width: 1024px) {
    .secondary-navigation .menu-toggle, .secondary-navigation .mobile-bar-items, .sidebar-nav-mobile:not(#sticky-placeholder) {
        display: block;
    }

    .secondary-navigation ul, .gen-sidebar-nav {
        display: none;
    }

    [class*=”nav-float-“] .site-header .inside-header > * {
        float: none;
        clear: both;
    }
}

This code would make the Hamburger button appear on screens less than or equal to 1024px. You can modify this value to your preference.

Here it is in effect on your site: https://share.getcloudapp.com/04uQq0rv

Hope this helps! Kindly let us know how it goes!

[Adam]

Hi Fernando,

I made those changes and now the secondary hamburger menu shows up at my desired width. It also hides the Primary menu at that time which is great. But I am wanting to hide the sidebar at the same time, can you please provide the code for that?

I managed to hide the sidebar menu but not the sidebar, it leaves the empty space where the menu used to be but I want the main content to spread 100% instead of leaving the 25% space for the left sidebar.

The whole idea behind this is customizing the breakpoints to automatically hide / show this secondary menu so that it doesn’t overlap the page content on smaller screen sizes.

Thank you,

[David]

try updating Fernandos CSS to this:

@media (max-width: 1150px) {
    .secondary-navigation .menu-toggle, .secondary-navigation .mobile-bar-items, .sidebar-nav-mobile:not(#sticky-placeholder) {
        display: block;
    }

    .secondary-navigation ul, .gen-sidebar-nav {
        display: none;
    }

    [class*=”nav-float-“] .site-header .inside-header > * {
        float: none;
        clear: both;
    }
    .page-id-6113 .content-area {
        left: unset;
        width: 100%;
    }
    .page-id-6113 .content-area .site-main {
        margin-left: 0;
    }
}

I adjusted the @media to match what you had and added the last two rules, both use the .page-id-6113 body class so that size change only applies to this page, its just a precaution in case you use the sidebars elsewhere.

[Adam]

Hey David,

Thanks a lot for the help, that works great. Everything seems to be looking and functioning correctly.

If I want to duplicate this arrangement, do I need to use a plugin or can it be accomplished with CSS/PHP?

I have a different webpage and am wanting to create the exact same setup except it would be using a new menu. By default I am limited to having one menu only display under the secondary menu location.

*Edit*
I just wanted to mention that I was able to accomplish what I wanted using a plugin (Conditional Menus) but I am still curious if this is possible without using a plugin to limit the number of plugins I have?
I linked the second page where I’ve set this up in the private info spot below.

Thank you,

[David]

WordPress has the wp_nav_menu_args filter:

https://developer.wordpress.org/reference/hooks/wp_nav_menu_args/

And you can use it in a PHP Snippet like so:

add_filter( 'wp_nav_menu_args', 'db_switch_menus' );

function db_switch_menus( $args ) {
    if( 'secondary' === $args['theme_location'] && is_page( 6482 ) ) { 
        $args['menu'] = '99'; 
    }
    return $args;
}

NOTES:
1. 6482 is the Page ID
2. 99 is the Menu ID

You need to change them to match the Page you want to make the change on and the menu you want to display.
If you edit a Page or a Menu check the browser url field to find the ID.

[Adam]

David, thanks so much for explaining that to me. That will save me from using more plugins.

A big thank you to you and the generatepress team for all the help!

[David]

I am happy we could be of help!

[Author]

Posts