Slideout menu tweak…

[Peter]

Hi Guys!

I have been trying to tweak the slideout menu a bit…

I want it to look similar to the one on the site below.

https://fivefunnel.com

Please let me know if it was possible.

Cheers, Pete

[Leo]

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 🙂

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

[Peter]

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

[Leo]

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 🙂

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

[Peter]

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 🙂

[David]

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

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

[Peter]

Hi David!

It has done the trick.

That is awesome!

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

Happy days! 🙂

[Peter]

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

[David]

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 ….

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

[Peter]

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

[David]

Try this CSS:

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

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

[Peter]

You are a legend!

Thanks a million David!

You have a fantastic weekend!

Cheers, Pete

[David]

Glad to be of help

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

[Author]

Posts