How can I disable a plugin on iPads/tablets?

Hello!

I have a plugin that I would like to disable when my site is accessed with an iPad or tablet. Is there a means for doing this? Thanks for any help or insight.

I should mention that I already use Mobile Smart Pro, but it does not support this. Most of our site users on iPads choose to run the desktop version of the site.

James

  • Tyler Postle

    Hey James,

    Hope you're doing well today!

    I don't know of a way to actually disable a plugin on mobile only, but I think an easier solution might be to hide or disable the functionality of the plugin. Depending what the plugin does anyway.

    Which plugin is it that you want to disable? and what functionality exactly? Then we can look further into this :slight_smile:

    Look forward to hearing back!

    Cheers,
    Tyler

  • James Wolfensberger

    Hi Tyler,

    The plugin in question is "Sticky Menu (or Anything) on Scroll" and it works really well on desktop/laptop (our main child theme) to keep our header and menu fixed at the top of the page. We chose this plugin after our theme developer was unable to give us a fixed menu solution.

    Meanwhile, we also use a mobile child theme, which is an entirely different interface than desktop that does not use the "Sticky Menu" plugin, but iPad users prefer the desktop theme, so we don't force the mobile theme on iPads - users complained when we tried that.

    On an iPad, the fixed menu can behave weirdly - it scrolls with the page, then snaps back into place, rather than simply remaining fixed during a scroll the way it does on a desktop/laptop. Then sometimes it fails to snap back into place and remains "stuck" somewhere in the middle of the page.

    If we could make it so that the "Sticky Menu (or Anything) on Scroll" plugin was disabled entirely at mobile & tablet device sizes, this would work great.

    Here is the plugin: https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

    Interestingly, this plugin does allow the disablement of plugins for mobile, but this doesn't help me with an iPad viewing our desktop theme.

    Thanks for any help or insight!

    James

  • Tyler Postle

    Hey James,

    Thanks for the detailed reply - do you have a link to which site you're using this on? Maybe we can force the menu to stay put on iPads with some CSS and media querys. I checked your quilters site but it doesn't look like that one has a sticky menu - if you could grant support access to the site as well that would help :slight_smile:

    You can grant support access via admin dashboard - WPMU DEV > Support > Support Access > Grant Access.

    Look forward to hearing back and hope you're having a great weekend.

    All the best,
    Tyler

  • Tyler Postle

    Hey James,

    Thanks for all your patience here. Unfortunately, the support access has an invalid token so I'm unable to login. Normally just revoking then regranting access will do the trick here, but if you wanted to be 100% sure that we don't need to ask for it again then you can always email us your WordPress login through our private contact form: https://premium.wpmudev.org/contact/

    Select "I have a different question" for your topic - this and the subject line ensure that it gets assigned to me :slight_smile:

    Send in:

    Subject: "Attn: Tyler Postle"
    -WordPress admin username
    -WordPress admin password
    -login url
    -link back to this thread for reference
    -any other relevant urls

    Select "I have a different question" for your topic - this and the subject line ensure that it gets assigned to me :slight_smile:

    Talk to you soon James!

    Cheers,
    Tyler

    PS. Is the sticky menu active right now? It's not sticking on quiltersbug for me - unless you need to be logged in maybe :slight_smile:

  • Tyler Postle

    Hey James,

    I think I got a solution for you here. The way the sticky header works on your site is that it's actually hidden until you scroll down to a certain amount, then it un-hides the sticky header and makes it look like it's just bringing the original one down.

    So, what we can do is force it to keep the sticky header hidden on certain screen resolutions. Try adding the following CSS to your custom CSS sheet:

    /* Disable sticky menu on tablets/phones */
    @media only screen and (max-device-width: 1024px) {
      #masthead.site-header.cloned {
      display: none !important;
    }
    }

    Normally we wouldn't use the "!important" declaration but in this case it's necessary to overwrite the sticky menu styling.

    Let me know if this does the trick :slight_smile:

    All the best,
    Tyler

  • James Wolfensberger

    Hi Tyler -

    I'm not sure if we're really close, or if I'm setting us up for a "bang head here" scenario.

    The CSS does indeed keep the menu from remaining sticky, but the trade-off is that (on an iPad), now when you scroll back to the top of a page to return to the menu, there is a moment during which the masthead isn't there, but it then "pops" back into place.

    I realize this is because of the "Sticky Menu" plugin and something with regard to how it works. I'm not sure if you have access to an iPad/tablet to see this behavior, but I am leaving it as-is in case you are able to observe it on an iPad. I am using the contact form to send you a user login in case you are able to try it on an iPad. Otherwise I'm extending support access as well.

    If we're stuck (ha! a pun! get it... sticky menu?), and you just don't see a solution, I do understand. I've already asked the plugin developer and he's aware of the iPad behavior that prompted my initial request here on WPMUDev, but he isn't very interested in addressing it.

    If you have any more ideas, awesome... if not, I appreciate your help tremendously nonetheless!

    James

  • Tyler Postle

    Hey James, happy to help where I can - especially because of that pun :smiley:

    /* Disable sticky menu on tablets/phones */
    @media only screen and (max-device-width: 1024px) {
      #masthead.site-header.cloned {
      display: none !important;
    }
    
    #masthead {
      visibility: visible !important;
      display: block !important;
    }
    }

    Try that out instead of the previous block I provided :slight_smile: Just adds some styles to make the masthead remain visible.

    Look forward to hearing back!

    Cheers,
    Tyler

  • James Wolfensberger

    @Tyler Postle -

    It now works great! I sent an email to WPMUDev a while back explaining that our site just would not be what it is today without the support of great staff like yourself. You always go the extra mile - seriously. Many times you could have said "oops, sorry that's too much to ask," but you always stick with it and give us a solution if at all possible. I understand why WPMUDev can't have a "tipping" policy but I really wish you guys had PayPal tip jars! You're awesome and I thank you sincerely.

    James

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.