Monitor Reply

Support

Navigation & iPad horizontal display mode

Permalink Browser Info Environment May 05, 2021 at 7:02 AM

Hi,

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?

Thanks

Type:	Pre-Sale
Status:	Resolved

shahroq replied on May 5, 2021 at 9:27 am Permalink Reply

You can add this piece to your custom.dev.less 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.

Pixel 2

Support

Navigation & iPad horizontal display mode

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post