Oracle APEX: Disable automatic hiding of left naviation Menu?

Question

In Oracle Apex (22.x), we are trying to deactivate the function for automatically hiding the side navigation menu in the mobile view when the browser window is narrow.

We want to ensure that the menu is still visible when the screen is narrow and can only be hidden by clicking on the show/hide button at the top right.

Is there a way to do this?

Best regards

As a workaround we tried to make sure that the menu is shown on every pageload (also fine) with some JavaScript like this:

$(document).ready(function(){

if ($('.PageBody').hasClass('js-navCollapsed')) {

    $('#t_Button_navControl').click();
    }
});

That doesn´t seem to work...

Answer 1

You should check the CSS media queries defined in the APEX core style and override it.

For mobile phone screens up to 480px add the follownig in the page Inline CSS section.

@media only screen and (max-width: 480px) {
  .apex-side-nav.js-navCollapsed .t-Body-nav {
    transform: translateX(0) !important;
  }
  .u-RTL .apex-side-nav.js-navCollapsed .t-Body-nav {
    transform: translateX(48px);
  }
  :not(.u-RTL) .apex-side-nav.js-navCollapsed .t-Body-title,
  :not(.u-RTL) .apex-side-nav.js-navCollapsed .t-Body-side,
  :not(.u-RTL) .apex-side-nav.js-navCollapsed .t-Body-content {
    margin-left: 48px;
  }
  .u-RTL .apex-side-nav.js-navCollapsed .t-Body-title,
  .u-RTL .apex-side-nav.js-navCollapsed .t-Body-side,
  .u-RTL .apex-side-nav.js-navCollapsed .t-Body-content {
    margin-right: 48px;
  }

   .apex-side-nav.js-navCollapsed .t-Body-nav,
   .apex-side-nav.js-navCollapsed .t-Body-nav .t-TreeNav {
       visibility: inherit !important;
   }
}