When viewing site on iphone or android phone in portrait mode and then rotate to landscape, the menu is just a solid black box. If the page is refreshed in landscape mode it looks as expected.
Thank you for getting back to us and providing the clear description of the issue.
This happens because the theme's scripts sometimes don't correctly recalculate the menu's dimensions after the screen orientation changes. When you refresh the page, the scripts load from scratch with the correct dimensions, which is why it then works properly.
Please add the following code to the Salient > General Settings > CSS/Script Related > Custom JS Code box:
After adding this script and clearing all caches on your site and device, give it some testing, and let us know if the display works correctly after rotating from portrait to landscape without needing a refresh.
Thanks for the code snippet. It all makes sense but when I tested it with my iPhone using Safari the page flickered and then the header went dark again. I looked at some other options based on what you recommended and ended up using:
<script>
window.addEventListener("orientationchange", function() {
// Reload the page after a short delay to allow orientation to settle
setTimeout(function() {
window.location.reload();
}, 200);
});
</script>
When viewing site on iphone or android phone in portrait mode and then rotate to landscape, the menu is just a solid black box. If the page is refreshed in landscape mode it looks as expected.
Attached files: IMG_3932.PNG
Hi Idoremus,
Thank you for getting back to us and providing the clear description of the issue.
This happens because the theme's scripts sometimes don't correctly recalculate the menu's dimensions after the screen orientation changes. When you refresh the page, the scripts load from scratch with the correct dimensions, which is why it then works properly.
Please add the following code to the Salient > General Settings > CSS/Script Related > Custom JS Code box:
<script> jQuery(window).on('orientationchange', function(){ jQuery(window).trigger('resize'); }); </script>After adding this script and clearing all caches on your site and device, give it some testing, and let us know if the display works correctly after rotating from portrait to landscape without needing a refresh.
Best wishes,
Salient Theme Support
Hi Pat,
Thanks for the code snippet. It all makes sense but when I tested it with my iPhone using Safari the page flickered and then the header went dark again. I looked at some other options based on what you recommended and ended up using:
<script> window.addEventListener("orientationchange", function() { // Reload the page after a short delay to allow orientation to settle setTimeout(function() { window.location.reload(); }, 200); }); </script>We can close this.
Thank you,
Ian
Hi Ian,
Thank you for getting back to us, and especially for sharing the workaround update.
We're glad to hear that you managed to figure this out.
If you have any further questions or encounter any difficulties along the way, please don't hesitate to reach out.
Best wishes,
Salient Theme Support