Return to previous page

Placing the off-canvas icon on header menu

This topic has 6 replies, 3 voices, and was last updated 1 months ago ago by Jack Richardson

Owen

Participant

August 13, 2024 at 13:41

Hi,

I would like to display on mobile the off-canvas icon on the bottom header, instead of it being sticky on the left side.

The intention is that when scrolling down the category pages on mobile, the products filters would be accessible through the filters icon that is fixed in the header.

This is the most common products filter display on mobile in most prominent ecommerce websites.

I would appreciate if you could please let me know how I can achieve this, either by adding a function, a widget, or adding html block to the header.

Thank you

#410088 Copied Theme version: 9.3.16

5 Answers

Rose Tyler

Support staff

August 13, 2024 at 15:42

Hello Owen,

Thank you for reaching out to us with your request.

Please provide an example of the desired result and URL of the page where “it is sticky on the left side”.

Thank you for your cooperation.

Best Regards,
8Theme’s Team

#410108 Copied

Owen

Participant

August 13, 2024 at 17:29

I think it’s pretty self explanatory.

The Xstore theme has the off-canvas icon (that’s how you call it) and you provide an option to display the sidebar position for mobile off-canvas with the off-canvas icon. You use it on all of your demos.

When I wrote sticky on the left side I was referring to that.

Instead of having this off-canvas icon float as it does on mobile by default on the left side of the screen, I would like to place it on the bottom header.

You can see examples of websites that display the filter icon on a header:

hm.com

johnlewis.com

marksandspencer.com

harrods.com

target.com

But it doesn’t really matter how it displays there.
I just need to place the off-canvas icon in the header and that should open the sidebar just as it does when it’s positioned on the left.

Thank you very much!

#410125 Copied

Jack Richardson

Support staff

August 14, 2024 at 08:57

Dear @Owen,

We hope this message finds you well. We would like to inform you that our theme supports the functionality of the Archive Product Builder, which is optimized for use with Elementor, the leading builder of the past few years. It appears that you have currently imported the demo using the WPBakery builder. We kindly suggest considering the switch to the Elementor plugin to take full advantage of our theme’s capabilities. We recommend re-importing the content using one of our Elementor-based demos for a seamless experience.

You can learn more about the benefits and features of the Archive Products Builder with Elementor by visiting our documentation: https://xstore.helpscoutdocs.com/article/191-xstore-products-archive-builder-with-elementor. This tool offers extensive customization options that can be tailored to your creative vision.

Should you choose to continue using the WPBakery plugin, we regret to inform you that we may not be able to implement your request through our standard support services. However, you are welcome to submit a feature request on our taskboard https://www.8theme.com/taskboard/ or request additional customization services https://www.8theme.com/account/#etheme_customization_panel.

Thank you for your attention, and we look forward to assisting you in enhancing your website. Should you have any further questions or require assistance, please do not hesitate to contact us.

Best Regards,
Jack Richardson
The 8Theme Team

#410168 Copied

Owen

Participant

August 14, 2024 at 16:20

Thank you Jack, but I’m not going to install Elementor.

I find its code to be heavy and cumbersome, with endless classes for each element.

I’m not a fan of using website builders at all as it’s hard to have real control of the code, to have flexibility, and to customize with css.

I’d rather use php, html and css files whenever possible.

I’ve implemented WPBakery not because I need it or it helps, but because on your implementation of the demos with WPBakery you rely less on it for the different sections.

So to clarify, I’m not asking for a solution that would be easy for me to implement in the backend necessarily.

I need either to add a function in the file or modify the original code (if you point me to it), so that I could place the off-canvas icon, whenever it’s being used (on mobile) in the bottom header.

If this was a widget I probably could have placed it also using the WPBakery header builder (just as elements such as search, cart, wishlist, widgets, html blocks can be added there to the header).

But as it’s not, I’m good with modifying files.

I have a list of top 42 major ecommerce websites and I often check how they implement functionalities.

Haven’t seen a single one of them displaying the filter icon on mobile in the middle of the screen, as it’s obviously obstructing the product images as people scroll down the page.

The filter icon on mobile is always below the header and from there the filters can be expended.

If Amazon and others are using it like this, it’s probably for a good reason:)

I would appreciate of you could please provide a solution for someone like myself, who does not use Elementor.

Thank you very much!

#410255 Copied

Jack Richardson

Support staff

August 15, 2024 at 10:04

Dear @Owen,

I hope this message finds you well. Based on the details you provided, it appears that you require additional customization. We kindly ask you to submit a request through our customization panel at the following link: https://www.8theme.com/account/#etheme_customization_panel.

Please note that we are unable to offer customization support directly through this platform in compliance with Envato’s privacy policy.

Thank you for your understanding.

Best regards,
Jack Richardson
The 8Theme Team

#410310 Copied
Tagged: best selling themes, enhanced woocommerce design, header menu customization, off-canvas icon placement, optimized online store themes, woocommerce themes
Viewing 6 results - 1 through 6 (of 6 total)