[Support request] Customizing GP Menu / Or Developing a Completely Custom Menu

[Alex]

I apologize if this has been covered in the past but I did search the forum (and, of course, Google) for quite some time and wasn’t able to find a support topic that covers it thoroughly.

Would someone be able to point me in the right direction to be able to start customizing my navigation?

I’m using GeneratePress with Beaver Builder and have Beaver Themer etc. I’m more than open to using the built-in GP menu but, if possible, would really like to achieve something like https://stripe.com. If not, how would I go about adding a CTA button, for one, and making other customizations with code?

Thanks in advance!

[David]

Hi there,

i actually attempted that here, but still buggy:

https://learn.assemblewp.com

Unfortunately it requires custom development and isn’t something we can provide support on here. Adding a CTA to the menu we have this article:

https://docs.generatepress.com/article/adding-buttons-navigation/

We can help with any CSS issues, or creating space between menus like the stripe nav.

These articles are also of help:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/

You may also want to check out the docs for Navigation and Header Elements

[Alex]

Hi David,

Thanks for taking the time to share that – I’m working with a highly capable developer but it is the first time they’re using the BB and GP combo because they typically prefer to do everything completely custom.

So, for the developers here – where would you recommend they start if they want to custom-build navigation/headers? Where would we start if we were trying to implement something like this?

https://codepen.io/ariona/pen/pENkXW

I obviously completely understand that it would not be right to ask you to help us with this, that goes without saying – I’m just looking for a little bit of direction here 🙂

[Alex]

Oh and also the example you included is great on the desktop version, the mobile version and animation are what we’re really after because the way Stripe and AutomateWoo.com have their mobile menus is amazing.

[David]

Yeah – gave up on that test site lol 🙂
That codepen is very much like the way Stripe did it, it would require a completely custom developed navigation for the desktop as it requires additional containers within the menu structure.

The method i used was loosely based upon what Wes Bos did, which is to create an additional div that follows behind the menus:

Creating the the mini mega menu is a right pain – maybe your developer can see a way round the simple mega menu we have an article on here:

https://docs.generatepress.com/article/building-simple-mega-menu/

For the Mobile, possibly a lot easier using the Off Canvas Panel, so the AutomateWoo example, you could add the button as per the doc i provided above and use the Off Canvas Panel widget area for the ‘footer’ nav:

https://docs.generatepress.com/article/off-canvas-panel-overview/

[Author]

Posts