Problem: iPhone header overlapped APEX Navigation - SOLVED

Challenge: My iPhone users complained about missing access to the APEX navigation and header. 

platform: APEX 26.2

I came across this CSS solution, which I put into
a text-file named: "iphone-safe-area.css" (courtesy ChatGPT)

and uploaded it under "Shared Components" --> "static application_files"

Content of the small file:

/* ==========================================================

   iPhone / iOS Safe Area Fix for Oracle APEX Universal Theme

   Prevents iOS status bar from overlapping APEX header/menu

   ========================================================== */

@supports (padding-top: env(safe-area-inset-top)) {

    .t-Header {

        padding-top: env(safe-area-inset-top);

    }

    .t-Header-branding {

        min-height: calc(48px + env(safe-area-inset-top));

    }

    .t-Header-controls {

        top: env(safe-area-inset-top);

    }

}


In order to have a affect on the whole application you have to add the file to your theme (Universal theme 42) as follows:

Go to "Shared components" --> "Theme" --> "Universal Theme 42" in the attribute section "JavaScript and Cascading Style Sheets" under "CSS File URLs" just add:

#APP_FILES#iphone-safe-area.css

thats it! Good luck!