Hello!
I have run into the following issue: When I try to change the size of the close button of the collapsed menu, the entire menu suddenly gets changed with paddings added left and right. See screenshots.
Any idea why this happens?
Appreciate your help!
Best Lutz!
Hi Lutz,
Thank you for writing in, yes that is normal behavior, please adjust the Dimensions to reduce that white space.
Hope it helps,
Cheers!
Hey, thanks for your quick reply. But this is not what I wanted. I want to make the very small close button a lot bigger which I can not do because the all the spacing on the sides gets added? What do I have to do to increase the size of the close button and NOT have the menu get “crunched” left and right? There sure must be a way to do this…
Hi again,
To clarify, this has to do with the clickable space around the button. Notice the clickable area is fairly large so it leaves plenty of room on touch devices
If you have a large amount of content (think expanded sub menus) in that off canvas area, it starts to scroll but keeps the button fixed. This is why the button size introduces padding to the content area.
It ensures the clickable button area never overlaps the clickable areas of the navigation items. Here’s what you can do to solve your concern. Under Customize while inspecting the element, go to the Element CSS. Here you can add a style to resize the close icon itself without changing the dimensions of its box (clickable space).
$el .x-off-canvas-close span {
font-size: 2em;
}
If you do this I’d recommend testing on a number of different devices to make sure it still behaves as expected and it isn’t possible to accidentally click a nav item when you intend to close the overlay.
Hopefully this helps!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.