Adding menu to offcanvas content area

how can i add my layer navigation menu to the off canvas content area. ill be honest ahead of time I bought X pro and im willing to learn it. but my request doesnt appear to be easily done. would it be easier to use the superfly addin or the ubermenu addin? if so can i still create my navigation layered menu and implement the off canvas content area menu for mobile devices

thanks in advance

Hello David,

You can’t add a Navigation Layered element in a Content Area Off Canvas element because they are separate elements. You simply add a Navigation Layered element to your content area/header and you should be able to get the mobile menu icon which launches a menu area when you click on it.

Hope this explains it.

can you advise where the mobile menu icon is or how i set that up. the layered navigation stays the same when in mbile view

Hi David,

Sorry, but your question is a bit confusing because the Navigation Layered element is an Off-canvas menu itself. Please explain what you’re trying to do so we can help you better.

The graphic (icon) option of the Navigation Layered element and other toggle element is under the Toggle tab

If you don’t see these options on your end, please enable the Advanced Mode.



Yes, Navigation Layered stays the same in mobile, would you mind to clarify what you’re expecting to happen for the menu on mobile?

If you have time, please watch the Better Headers series on our Youtube Channel, this will help you understand how the Header and Footer builder works.

Thanks,

Thank you for getting back to me. Im sorry for the confusion. As previously mentioned I am new to X pro and a novice at website building. The layered menu is good for desktop and laptop view. But when it goes to mobile view it takes up half the screen practically. I would like to end up with a hamburger menu in mobile the flies in from the right. Have a look at this gentlemen website https://engenius.eu/

I found him through the forum. Only difference is he has an inline menu for desktop laptop view.

I apologize again for the confusion.

I would like to formally request a refund. I got in way over my head with this website build for my own site and i did not realize the learning curve. Your product is amazing and for the more seasoned developers I am sure it provides them loads of customization. I unfortunately did not realize the difficulty in building a site. The demos provided are great but not necessarily format im looking for. pls advise what can be done. you can revoke license and i can remove from my wordpress. thanks again.

Hi David,

Sorry for the delayed reply, please give us a chance to help you. The header that we are seeing on this site (https://engenius.eu/) is actually a straight forward and easy to do even for beginners, as you can see that site has a Navigation Inline on desktop and a Navigation Collapse on mobile.

The trick of showing only one navigation and hiding the other on certain screen size is achieved by utilizing the Hide During Breakpoints option, all elements have this Hide During Breakpoints option so you can easily apply this.

As you can see on this screenshot you have 5 screen sizes option (XL, L, M, SM, XS). You just select on which screen size you want the element to be hidden, so that is Navigation Collapse will be hidden on XL, L, and M (hide on desktop), while the Navigation Inline will be hidden on SM and XS (hide on mobile).

For now, please focus on these three things to easily understand how this works. Forget about the layered menu that you’re referring for now as I think that is causing you the confusion.

Let us know if there is still something that is not clear.
Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.