Slider off-canvas menu

Hi there,

I'm not sure if I fully understand.

Can you provide an example?

Let me know :)

When you open the menu outside the canvas, it shows you the first level items but the second level items (sub-categories) open downwards when clicked with the mouse. I need them to unfold to the side. NOT down.

screenshots:
"look at the names of the images"

images

Hi Jose,

You can try adding this through Appearance > Customize > Additional CSS:

#generate-slideout-menu.main-navigation .main-nav ul.sub-menu.toggled-on {
    position: absolute;
    left: 100%;
    top: 0%;
}

nav#generate-slideout-menu {
    overflow: visible;
}

Hello Fernando, Thank you very much. You just made my day.

Hello again, I have one last question. How can I leave the "off-canvas menu" icon on the left side as the attached image shows?

image

thank you!

Hi Jose,

To only move the menu icon to the left is not possible, unless we use some CSS to make it position:absolute, but it's not a good practice, as it might cause other issues.

We can move the search icon and the menu icon together to the left if you want.

Let me know!

Hello, it would be a good option to do it with css,
would you have the code? I can modify it later.

Can you link us to your site?

http://www.tecrea.cl

Try this CSS, it will only work for screen wider than 1025px.

@media(min-width:1025px) {
span.menu-bar-item.slideout-toggle.hide-on-mobile.has-svg-icon {
    position: absolute;
    left: 0;
    top:0;
}

div#primary-menu {
    margin-left: 8em;
}
}

I am very grateful for your help Ying.
You're great!!!

You are welcome :)

Hello, I have the menu outside the sliding canvas thanks to the CSS code that Fernando gave me in the top answer.
I would like to ask you how I can leave the child menu (sub-menu) as a mega menu with two or three columns.

If there is any CSS that you can generate for me, I would greatly appreciate it.

thank you so much

Hi Jose,

That would be a bit complicated because we would also need to consider the sub-sub-menu items. Such a level of customization would be out of our scope of support. It would be best to reach out to a developer regarding this.