Pro: Bottom header bar gets hidden on mobiles due to iphone back button

[b960a518_a049_4215_9fec_f8e5379ab96d]

see this page in mobile view http://staging1.kidsmagicworld.com.au/home-test-2/

we have the bottom bar that says choose your magic show and menu

On Iphones and several other devices it has a bar on the browser that goes over the content on the page
(like the back button)- unfortunately this goes over the menu and causes the inability to navigate or use any of the bottom bar buttons

so the bottom bar has the main menu, but when you have Safari open on an iPhone, you get that bottom fixed bar that has the back icon, forward icon, bookmark icon and new page icon. When that bottom safari bar is visible, it covers the fixed footer item
its not just safari iphones either its on other devices- It makes the bottom header bar useless on mobiles

you wont be able to get test this on an emulator

is there anyway to push the content up if a mobile has that bar across the bottom? so that the bottom header bar is always visible?

[b960a518_a049_4215_9fec_f8e5379ab96d]

I have seen this- not sure if it is relevant

How to deal with Safari action bar on iPhone?

not sure if you understand the javascript in order to get this to work

[nabeel]

Hi there,

Thank you for reaching out to us. First try inspecting your bottom bar and change the z-index to a higher value e.g 999999 (see screenshots)

If this doesn’t help, then try this: add a class to your fixed bottom bar e.g bottom-fixed-bar

Then try adding the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	/mobile/i.test(navigator.userAgent) && setTimeout(function
() { $('.bottom-fixed-bar').css('bottom', '30px') }, 500); 
});

Adjust 30px accordingly. Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!