[Resolved] Mobile menu cusfomosation

[purnima banik]

I want to customise the mobile menu like this website. Please suggest the css.

[Fernando]

Hi Purnima,

The menu in your reference site is an Off-Canvas Menu on mobile.

You may activate the Off Canvas Panel Menu through Appearance > Customize > Layout > Off Canvas Panel.

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

To replicate the menu, you would need to create a menu that has dropdown custom links.

Here’s a reference to do as such: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-link

You would need to assign this menu to the Off Canvas Panel Menu.

With regards to other modifications needed, kindly send the link to your site once you’ve created the menu.

You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Also, would the be a different reference site we may use with a similar menu of your liking? The reference site seems to load really slow. Tried using VPN as well, but to no success. Or, can you send a screenshot of the menu.

Hope to hear from you soon!

[purnima banik]

I am sorry, actually I wrongly replicated the issue. Actually, I wanted to have the header design and menu design similar to the mentioned site. Could this be done ? Regarding the Off Canvas Menu, I can do the same but wanted to customise the header design of my site in mobile view.

[Ying]

For desktop:
You can use block element to insert phone icon/open an account/login button, choose menu_bar_items hook.
The green navigation can use secondary navigation, but to have the similar submenu, you’ll need mega menu plugin.
Please refer to the screenshot below:
https://www.screencast.com/t/fSvgxLtCUk

For mobile:
You can use off canvas menu, but it will require a lot of customization with custom CSS which will be out of the scope of our support forum. We are happy to point you to the right direction, but we can’t offer that amount of customization, thanks for your understanding!

[purnima banik]

Thank You

[Ying]

You are welcome 🙂

[Author]

Posts