Menu Layout iPad - Forum | JoomShaper
Solved Helix Framework

Menu Layout iPad

Asked by johnny 3 years ago Last activity 3 years ago

When I view my website on an ipad the menu items overflow on to two rows.

If you view using devtools you will see what I mean.

How can I fix this?

Accepted answer

Marked as the solution
Paul Frankowski Senior Staff
3 years ago · edited

Here is CSS fix for Smaller Screen

@media screen and (max-width: 1090px) {
.mod-finder.js-finder-searchform.form-search {display: none;}
#sp-menu .sp-megamenu-parent > li > a, 
#sp-menu .sp-megamenu-parent > li > span {font-size: 15px !important;}
}

Note! In your case problem was caused by font size and search module. There is no space for it.
It's better to use search icon instead, if you want to keep it. Just a simple math, like in the car with 5 sits, when 6 persons want to sit comfortable inside. Few of them must be slim

3 more replies

Oldest first Newest first Most helpful
Paul Frankowski Senior Staff
3 years ago · edited

Hi Johnny,

what iPad screen resolution?

I guess IPad Pro 12, right.

johnny Asked this
3 years ago

Thanks Paul, I have added this and it works.

I would prefer to use the search icon actually!

Paul Frankowski Senior Staff
3 years ago

Using separate subpage for search has several advantages, first of all, you can put Text module on the right side with useful information to reduce search time. In my local church uses this trick to inform about open hours and events etc..

johnny Asked this
3 years ago

This is a better idea, I have now added an icon only and it's better.

Thanks Paul

Log in to reply.