Navigation & iPad horizontal display mode

Permalink Browser Info Environment

When the theme is rendered on an iPad horizontally, the navigation changes from mobile to desktop. This pushes the navigation links to below the bar and instead overlays in the slider area. Significantly reducing the the number of links to make it fit just for a horizontal iPad display mode isn't practical (I had to reduce it to just 4x top-level navigation links and reduce the padding from the default 12px to 6px, which made it look silly on a desktop).

Is there a way to force the dipaly mode to be that of the mobile view when using the site on an iPad horizontally?


Type: Pre-Sale
Status: Resolved
View Replies:
shahroq replied on at Permalink Reply
You can add this piece to your file:
change primary menu padding (make it not break when menu is too long)
nav#primary-menu > ul > li > a {
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    padding-left: 5px !important;
    padding-right: 5px !important;

Also, in order for this to work on 2.4.0, open the `\packages\theme_pixel\blocks\autonav\templates\pixel_main_menu.php` and remove `!important` from padding rules on lines 44-45. This has been fixed on our master copy and will be available on the next version, so you won't lose it on next update.

concrete5 Environment Information


Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.