Slideout menu tweak...

Hi Pete,

I think it's a pretty cool idea so let's give it a shot.

- Change the breakpoint to 2000:
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

- Add this CSS:

body .main-navigation.toggled .main-nav li {
	display: inline-block !important;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Can you link me to your site in question with the method applied if you need further help with this?

Let me know :)

Hi Leo,

Thanks for getting back to me.

I have added the code to the css and changed the breakpoint.

What happened was, my header with the logo in the middle has disappeared and the menu still opens from the right hand side.

Here is a bypass link to my page...

https://howhatwhy.com/peek

Thanks a lot for your help!

Cheers, Pete

Sorry. My method doesn't actually require the off-canvas panel.

Can you turn that off for now?
https://docs.generatepress.com/article/off-canvas-panel-overview/

Let me know :)

Hi Leo,

I have just turned off the off-canvas.

Not much has changed apart from the menu now does not slide in from the right.

Cheers, Pete :)

Hi there,

if this is going to be for desktop and mobile, go to Customizer > Layout > Primary Navigation and set the Mobile Breakpoint to a real high number like 5000px. You should now have Menu toggle on desktop and mobile:

Then add this CSS:

.main-navigation:not(#mobile-header).toggled .main-nav>ul {
    position: static !important;
}

@media (min-width: 769px) {
    .main-navigation:not(#mobile-header).toggled .main-nav>ul {
        display: flex;
        justify-content: center;
    }
    
    .main-navigation.toggled .main-nav li {
        flex-basis: 20% !important;
        text-align: center !important;
    }
}

That should get the basics done - let me know

Hi David!

It has done the trick.

That is awesome!

Thanks a million for your and Leo's time and help!

Happy days! :)

Oh one more thing...

The menu is working fine now, but the header is missing since I have added Leo's code to the custom css.

P

Thats because you have the Mobile Header enabled. If you disable that and only apply the code i provide then you can keep the site header ....

You are a star David!

Thanks a lot!

Sorry for being a pain, but is it possible to move the header logo between the search and the menu icon like on this site?

https://fivefunnel.com/

Cheers, Pete

Try this CSS:

.nav-search-enabled .main-navigation .menu-toggle, 
.main-navigation .mobile-bar-items {
	transform: translateY(-150%);
    width: auto;
}

You are a legend!

Thanks a million David!

You have a fantastic weekend!

Cheers, Pete

Glad to be of help