Slide Navigation Offcanvas

Hello Support Team, I need your help. I have created an offcanvas in the header mobile start page. With an accordion and a slide navigation. When I click on #prev everything works and when I click on #next, the offcanvas closes. I have tried many settings but unfortunately without success.

Or is there a possibility to choose between two headers like on the desktop version. I did it the same way, when you click on deco you get a different navigation than with Festive deco

Hello Support Team, is anyone here? I’m not used to not getting an answer from you for 3 days. I need an urgent solution or a suggested solution. You can also take a look at the Zalando Mobile Navigation. The aim is to switch between the women’s, men’s or children’s categories while remaining in the off-canvas.

Here is the link and a screenshot:

https://www.zalando.de/

Hey Uslu,

Thanks for writing in! I believe that this is a bug in the recent release. I will inform @Charlie about this. He still not around this week so possibly, he can check it out when he gets back.

If you want separate custom headers for each category, yes that is possible. You just need to assign a condition like:

Best Regards.

I have tried to configure the header settings as described, but the header is not displayed on mobile devices. I have currently created three different headers for the desktop view, and these work perfectly and are displayed correctly. For these headers, I have selected the option that they should only be visible in the desktop view.

Now I would like to create these three headers additionally in an offcanvas version for the mobile view. My goal is that only the offcanvas headers are displayed on mobile devices, while the normal headers remain restricted to the desktop view.

Unfortunately, I am already encountering difficulties with the first offcanvas header. As soon as I deactivate the desktop view for this header, no header appears in the frontend on mobile devices. Even if I only deactivate the desktop view, the header remains invisible in the mobile view. It looks as if the header has been completely deactivated, even though I only intended it for the mobile view.

In the cornerstone it is displayed in the preview but not on the page.

image

I urgently need a solution here please. I can’t get any further with the store. We have a deadline to meet. Thank you very much

Please solve the problem as quickly as possible. I’m not making much progress and I have a timeline that I can’t miss.

Please help me. I need help here to get ahead. I bought the largest package from you. I am not used to it taking so long with you. Could you please give me some feedback

I have now solved this by not creating the mobile view separately as a new header, but by including the mobile view in the desktop view. Now it is displayed in the frontend, but when I select the deco or festive deco button in the offcanvas, the entire page reloads and the offcanvas closes and you have to open the offcanvas again.

So, now I’ve been working on it for hours and got it so far that I can switch between the main categories. Now I only need the sub-categories. This means that when I click on a sub-category, I want to stay in the offcanvas and switch to a new page with the sub-sub-categories

Hey @Uslu,

I am seeing this:

There are no links in each of the categories. By the way, please consider using the Tabs element. It should be easier to target the tab on specific pages.

Thanks.

I would like that when you click on the first image, for example, a new page opens in the offcanvas and the content is displayed there

can you do this or not?

Hello @Uslu,

“I would like that when you click on the first image, for example, a new page opens in the Off Canvas and the content is displayed there”

  • I believe that this is not possible because the Off Canvas is not an iFrame which can load another page source within that off canvas content area.

Thanks.

Have you ever looked at the mobile menu of zalando ? There must be a way to implement this ? I was not yet limited with Themco pro and also not with cornerstone. Do you have an idea how we can solve it differently ?

If you had a top level Tab element that had it’s navigation hidden and handled everything from toggle-hashes you can probably achieve this page approach like that zalando site is doing. I created a sample template here.

https://theme.co/app/uploads/share/tabs-hidden-navigation.tco

If you used data-x-slide-goto attribute you could also possibly navigate from a slider. The Themeco tab template “Image Gallery Slider” utilizes this custom attribute.

@charlie First of all, I would like to thank you for your reply and your efforts. It looks good how you have solved this. I can do something with it. Unfortunately, I still don’t understand a few things exactly. I always need the images in the tabs two next to each other in a row. As in the screenshot above the tab. Then you have integrated the images so that they always change, where can I find these images? Or is it web based and the images change outside of the server? And I also did that with the attribute but I am missing a value for the slide. Could you please help me here ?

Many thanks in advance

In my template I’m not using a slider as the page navigation. Each image can be a link that points to the toggle hash. The data-x-slide-goto is just another potential solution, but what I sent you isn’t a slider.

Image has a link

Tab acting as a page with toggle hash

image

The images were inside the first tab. I was just using a random image url for the sake of demonstration. What you would do is setup your design, and when an image is clicked liked zalando, it goes to the next page / tab.

image

@charlie I would like to thank you very much. It worked really well. Best service ever

You are most welcome, @Uslu.
We are glad that @Charlie was able to help you out.