Page menu is hidden behind the slider on mobile (iOS6)

It sounds like the slider might be using a higher z-index for it’s positioning which is loading above the menu position (as a layer above). With the demo of this theme, I just tried it in my iphone and it works, so I am assuming the plugin is layered on top. I’ve never heard of the Meta Slider so I would have to explore this to see if there is anything I can do on my end…but first assumption would be to to increase my menu z-index. In the theme’s menu.css file, there is this:

.mainmenu ul.menu,
	.mainmenu li ul {
		display: block!important;
		width: 100%!important;
		margin:0;
		padding:0 10px 0;
		background-color:#78a5b6;
		list-style:none!important;
		position: relative;
		z-index:3;
	}

Try increasing the z-index: 3 to perhaps 99999 and see if that helps. Note: best to make these kind of changes with a child theme.

Did this solution work for you, agfisio? I tried it, and my slider is still on showing on top of my menu in iOS. I also had this problem with the soliloquy slider, so I switched to Meta Slider, and the above solution didn’t work for me using either one.

Hi reticent98…..do you have a link to your site? I want to check this out on my iphone and see if I can see what is happening. This may depend on the slider being used as there are so many it’s hard to code for every one, but will see what I can do.

https://dschurchaz.org/testarea/

I use the theme for my members-only website, so I created a testing area. No plugins are installed except for Meta Slider, although Soliloquy slider has the exact same behavior. I have noticed the same problem just resizing the browser window. To a certain size, the menu stays on top, even after the menu switches to the smaller format, but after you get down to around the size of a mobile phone screen, the slider appears on top of the menu.

It seems I can only reproduce the issue on my desktop using Chrome. It doesn’t happen when re-sizing the browser window in IE 10 or Firefox. On my iPhone, the problem occurs using both Chrome & Safari, but not in Opera.

I have an update for this issue… with your site, it happens in Chrome and Safari when I resize (downsize) the browser window. For the life of me, I do not know why this is happening only for the mentioned browsers.

However, I did setup a test site locally on my system here, installed both the Preference Lite and the PRo. I then installed the Meta Slider, setup 3 slides, used the Advanced text widget with the slider’s shortcode, and then tried the browsers. Interesting slider plugin, but the story here is that it worked for all browsers I have.

So how about we do this….send me (via email) a login for your test area site and I will try out your install of the slider.

Hmm. I don’t use that plugin. I had added <?php echo do_shortcode(“[metaslider id=#]”) ?> to the header file and then adjusted the header showcase padding through the theme. I will try using the Advanced Text plugin that you used.

Best to use the widget which works well and has some nice extra settings, one is to disable the title. Works well when you need to load the widget in an area that the title is not to be seen. Plus, the widget can be published to select areas.

Try to reverse what you did with the header.php file and get it back to it’s original state, then try the widget method.

So, I restored the header file, then I installed the Advanced Text widget, and switched over to the Widgetkit slider that you use with the demo. I still get the same result. I will contact you with the details.

If anyone is reading this thread, although agfisio had resolved it before I started replying to it, the theme author fixed my problem by recreating the menus and ensuring that I was using the Widgetkit slider.

Hi, reticent98!
The Meta Slider author answered me to add this to the theme styles.css file:

.nav-collapse {
    z-index: 9999;
}

It worked for me, so maybe it will help you.

Regards

Thank you, agfisio. If I decide to use the Meta Slider again I will try out that code.

Hi, I have the same problem with meteor slides. Have already tried to set z-index:99999. My site is enchantedduo.com

The most stubborn thing to do is to always keep a menu above the millions of sliders out there, lol ??

It depends on the slider too, but what I will do here is play with this on my local test site and see what I can do with the theme’s mobile menu and find a way to force it on top and the slider to be behind it.

Ah… after testing the Preference Lite as well as the Preference Pro version. So my first question is…did you make a custom menu yet or are you using the fallback page menu? If you create a menu, the mobile menu styling is based on this, so you will want to make sure you have the main menu created.