Hiding a menu item on tablets only - Forum | JoomShaper
Solved Helix Framework

Hiding a menu item on tablets only

Asked by Ahmed Balfaqih 5 years ago Last activity 5 years ago

Hello support,

I would like to know if it is possible to hide a main menu item with its sub-items from tablets or mobile. If so, how?

I am using Helix Ultimate frameworkd.

Check the image attached. Those surrounded by yellow are the one I want to hide.

Thank you.

https://www.dropbox.com/s/r5vwfq8qasqn5mc/click%20menu.png?dl=0

Accepted answer

Marked as the solution
Ofi Khan Staff
5 years ago

You are welcome. iPad on landscape takes the screen resolution of 1024px. This is why this issue is created.

2 more replies

Oldest first Newest first Most helpful
Ofi Khan Staff
5 years ago

Hello Ahmed Balfaqih

Please use this CSS to Template Options -> Custom Code -> Custom CSS

.offcanvas-menu .offcanvas-inner .sp-module ul > li:nth-child(4),
.offcanvas-menu .offcanvas-inner .sp-module ul > li:nth-child(5),
.offcanvas-menu .offcanvas-inner .sp-module ul > li:nth-child(6){
    display: none;
}

Best regards

Ahmed Balfaqih Asked this
5 years ago · edited

Thanks Ofi.

It worked, and they are hidden from the off-canvas menu. However, It think this is not what I want.

My problem is when I view my webiste on my iPad I can see that the Contact Us on the main menu goes to the second line. I guess, the system still think that I am using a normal desktop. I may have to redo my menu again and move those that are not important away. Thank you anyway.

Log in to reply.