Hi,
I’m using layered navigation element inside the Off Canvas element. But there’s peculiar issue when you have a submenu. If the submenu has more items than the main menu, when you go back to the main menu, the element does not go back to the original main menu height but keeps the height of the taller submenu, which creates gaps/blank spaces. I first search the topic and came across this thread:
Here’s the issue using a sample menu:
Any solution or workaround for this?
Thank you
Hello @kgpthemex,
Thanks for writing to us.
Regretfully there is no option for that since it automatically calculates that height but you can add custom height by using custom CSS code. You need to go to the Navigation off Canvas element —>Customize —>Element CSS.
$el .x-off-canvas-content{
height:200px;
}
Please feel free to change the height as per your design. The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.
Hope it helps.
Thanks
Thank you for the suggestion. However, that style would modify the entire canvas as opposed to the menu itself.
I did however find the solution by targeting the class from the first state .x-current-layer and setting the original height, in this case 150px. Now when I go back, the primary menu items go back to their original position. Hopefully this will help someone in the future.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
