[Support request] Slideout Navigation Custom (left)

[nate]

Thanks for a great theme – I got it for SPEED.

And I am also using Elementor with custom archive and post designs for best UX.

My question is two-fold:

1. How do I move the hamburger icon to the left, instead of the right, like seen here: http://healthambition.com

2. What is the best way to design the slideout nav menu like seen here: http://healthambition.com

Many thanks and warmest regards!

[Leo]

Hi there,

1. Can you link us to the page in question? You can edit the original topic and use the private URL field.

2. Which part specifically?

Let me know.

[nate]

Hey Leo, I have not yet started on the site build, just playing local right now. But on healthambition.com, the hamburger icon is left (next to logo), instead of right like it is default. So I want to first move it left, next to logo on desktop as you can see.

Secondly, I just want to know the best way to create the multi-dropdown navigation menu used in the slideout with the multiple levels, parent, sub, sub sub. Is this done via wordpress menus then assign to slideout somehow? I assume the icons too are just using font awesome in the wp wordpress menu name field?

Thank you!!

[Leo]

1. We should be able to use some CSS. Can we revisit once you have something set up?

2. Yup that’s WordPress menu is the way to go. See info on FontAwesome here:
https://docs.generatepress.com/article/font-awesome/

[nate]

Hey Leo, I’ve changed some of my thoughts about this. I am finding that the hamburger icon on right, on mobile, especially for larger phones like iphone 6 plus, is best for right-handed people (majority). So for UX, this seems best for us.

I use shopify + wordpress on this specific site as example. So I am in process of just adding the cart icon to direct to shopify cart on wordpress header.

But here’s what I am trying to do:

1. Make arrangement Logo Center, Hamburger Right and Shopping Cart Icon Left of Logo.

Any ideas how to do this? URL provided in updated original post.

Many thanks!

[Leo]

Can you add in the WooCommerce cart first?

I would also recommend trying our mobile header feature:
https://docs.generatepress.com/article/mobile-header/

Then this CSS to center the logo:
https://docs.generatepress.com/article/centering-logo-mobile-header/

Let me know 🙂

[nate]

Thanks but all I am trying to do is emulate the slideout menu style you can see on our store.organicvegansuperfoods.com, on our wordpress install with GP here: organicvegansuperfoods.com. I got it close, but the text alignment and styling is off.

[Leo]

Are you referring to desktop or mobile?

And what do you mean by text alignment and styling is off?

[Author]

Posts