Fix the missing or blurred hamburger icon in the navigation menu after upgrading Oracle APEX 5.X to a higher version
Introduction
After upgrading my APEX app from 5.1 to 21.1 I struggled with the lost hamburger icon in the navigation menu, like this:
A quick fix can be tricky.
If we inspect this corrupted element (Chrome F12), we can find:
<span class="t-Icon fa-bars" aria-hidden="true"></span>
And If you add an extra "fa" class like this:
Looks almost ok. But the icon is a bit blurred.
This is not a perfect solution because you should modify all templates. However, there is a better, fast solution without changing anything in templates.
What caused such problems?
My APEX application was built in APEX 5.1, and developers customized some templates. That's why my template was no longer subscribing from Universal Theme. So after upgrading it, some CSS classes had gone.
How to fix the icon?
Step 1
Backup your application!
Step 2
Go to Shared components -> Themes. In my example, my current theme is 100 (the one with a corrupted hamburger menu icon)
Make a copy of your current theme - for backup purposes, call it, e.g. 101. When copying, choose "Subscribe theme" -> NO.
Step 3
Go to Shared Components -> Themes,
Check if you have another theme (Universal Theme) - probably it's 42 (if you don't have any universal themes in your app - download it first). Refresh theme 42 to be sure it's fully up-to-date.
Click "Restore theme subscription" and choose:
"Oracle Theme" as a "Theme source"
Subscribing theme -> choose your broken theme without the hamburger icon, e.g. 100
Master theme -> choose 42
Click "Restore subscription".
Step 4
Go to Your application theme (in my example, it is 100) -> click "Verify" -> Then "refresh".
If you had custom styles in your theme, e.g. 100, it would probably be lost after this operation.
That's why we created a backup theme 101, so you could quickly move your custom styles from theme 101 to fixed theme 100 :)
If after the above steps, sth still looks wrong, then instead of refreshing Theme 42, delete it and create from scratch. Then, it should do the work.
Now it looks just as you wanted, right? :)
