WordPress.org

Ready to get started?Download WordPress

Forums

Preference Lite
[resolved] Page menu is hidden behind the slider on mobile (iOS6) (23 posts)

  1. agfisio
    Member
    Posted 1 year ago #

    Hi, I am using the Meta Slider (flex slider) plugin in my website. The plugin is great, as is the Preference Lite theme, but when I open the page in my iPhone (iOS6), the main dropdown menu gets hidden behind the slider.
    Is there any configuration that I can do to fix this?
    I´ve sent a message to the plugin developer, still waiting for his answer. But, just in case, I´d like to hear your thoughts on this.
    Thank you very much.

  2. StyledThemes
    Member
    Theme Author

    Posted 1 year ago #

    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.

  3. reticent98
    Member
    Posted 1 year ago #

    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.

  4. StyledThemes
    Member
    Theme Author

    Posted 1 year ago #

    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.

  5. reticent98
    Member
    Posted 1 year ago #

    http://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.

  6. reticent98
    Member
    Posted 1 year ago #

    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.

  7. StyledThemes
    Member
    Theme Author

    Posted 1 year ago #

    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.

  8. reticent98
    Member
    Posted 1 year ago #

    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.

  9. StyledThemes
    Member
    Theme Author

    Posted 1 year ago #

    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.

  10. reticent98
    Member
    Posted 1 year ago #

    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.

  11. reticent98
    Member
    Posted 1 year ago #

    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.

  12. agfisio
    Member
    Posted 1 year ago #

    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

  13. reticent98
    Member
    Posted 1 year ago #

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

  14. neitcho
    Member
    Posted 11 months ago #

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

  15. StyledThemes
    Member
    Theme Author

    Posted 11 months ago #

    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.

  16. StyledThemes
    Member
    Theme Author

    Posted 11 months ago #

    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.

  17. neitcho
    Member
    Posted 11 months ago #

    Fallback page menu no custom menu created.

  18. StyledThemes
    Member
    Theme Author

    Posted 11 months ago #

    Thought so... no worries, simply make a new custom menu for your main primary menu and you should be fine, as I just tested this with several different sliders, including the one you are using.

  19. neitcho
    Member
    Posted 11 months ago #

    Thanks, I see the full menu now with custom menu but the slider links are beeing klicked instead of the menu links.

  20. StyledThemes
    Member
    Theme Author

    Posted 11 months ago #

    Odd.... but I went to check out your site with the link above but no longer there. Is there a new one I can take a quick look and try it?

  21. neitcho
    Member
    Posted 11 months ago #

    This is the link http://enchantedduo.com/

  22. neitcho
    Member
    Posted 7 months ago #

    Have you had any chance to look into this?

  23. StyledThemes
    Member
    Theme Author

    Posted 7 months ago #

    It's been resolved actually...plus you have an older version of the theme so you may want to consider updating. Make a backup first before you update.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic