offcanvas menu spacing - Forum | JoomShaper
Staff replied SP Page Builder

offcanvas menu spacing

Asked by doug raught 5 years ago Last activity 5 years ago

I have a difficult time selecting offscreen canvas menu items. I'm using helix ultimate. I don't have a problem on my mobile phone, it is just on the iPad. I have to tap numerous times (4-8 times). Anyone browsing my website with an iPad would certainly give up and leave.

As a work-around, I have enlarged the offcanvas font which helps a little bit. But anyone with larger fingers will get experated.

Is there CSS code that I can add which would enlarge the spacing of offcanvas menu items?

Hopefully someone has a solution. Thanks!

3 replies

Oldest first Newest first Most helpful
Rashida Rahman Staff
5 years ago

Hi there,

Thanks for contacting us.

Would you please give me your site URL here to check?

Best Regards

doug raught Asked this
5 years ago

Thanks for the reply. The site and login are attached.

Rashida Rahman Staff
5 years ago

Do you want to increase the sapace indicated in the following screenshot?

https://prnt.sc/1tq6yy0

Then you can simply increase the top and bottom padding value of your meni items. Here is a sample code for you to put into the custom CSS:

.offcanvas-menu .offcanvas-inner .sp-module ul > li a, .offcanvas-menu .offcanvas-inner .sp-module ul > li span {
    padding: 20px 20px 10px 25px !important;
}

You can change the values as per your need!

Note: Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Best Regards

Log in to reply.