[Resolved] Slider off-canvas menu

[José Ojeda]

Hello, I need the “off-canvas menu” to be a slider and not an accordion. It’s possible? Is there a way or some code that makes it slider?

[Leo]

Hi there,

I’m not sure if I fully understand.

Can you provide an example?

Let me know 🙂

[José Ojeda]

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

[Fernando]

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;
}

[José Ojeda]

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

[José Ojeda]

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!

[Ying]

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!

[José Ojeda]

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

[Ying]

Can you link us to your site?

[José Ojeda]

http://www.tecrea.cl

[Ying]

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;
}
}

[José Ojeda]

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

[Ying]

You are welcome 🙂

[José Ojeda]

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

[Fernando]

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.

[Author]

Posts