Archived topic
How Display a Hook Element on Mobile, Tablet or Desktop Only?
1 reply · Started by pairfum on August 14, 2021
Dear Support,
We would like to add the following multi-currency switcher via a shortcode to our site using a GP Hook Element:
https://wordpress.org/plugins/woo-multi-currency/
On the desktop:
> we will use one shortcode that adds a vertical drop-down currency switcher,
> the Hook Element will display as part of the navigation bar.
On mobile & tablet:
> here we will use a shortcode for a horizontal currency switcher,
> the Hook Element should NOT display the currency switcher as part of the mobile navigation bar and instead it should be part of the off-canvas menu.
We currently have this configured exactly like this on our live site using a 'Short Code in Menu' plugin:
https://www.pairfum.com
For various reasons we would like to switch from this solution to GP's Hook Element instead and for this reason we would like to know:
1. how can we limit the display of a Hook Element to Desktop only? Is there a better alternative to a CSS code snippet using display:none in combination with @media ?
2. how can we get a Hook Element to display as part of the off-canvas menu on mobile rather than within the mobile navigation bar?
Many thanks for your help with this.
Kind regards,
Pairfum London
Hi there,
1. (More for info) WP does have the wp_is_mobile() function.
https://developer.wordpress.org/reference/functions/wp_is_mobile/
Which could be used to filter the display of an Element.
But.... it has issues, like a) it may not recognise all mobile devices b) it doesn't work with screensizes so your 1024px tablet view would be broken on small desktop browsers and c) you have to make sure Page Caching doesn't completely ignore it.
And for those reasons i would NOT bother and just use CSS to hide it. Just wanted to make sure you knew of the other options in advance.
2. I will cover the total method i would use.
a) For Desktop - use the generate_menu_bar_items hook and add:
<div class="hide-on-mobile hide-on-tablet">YOUR DESKTOP SHORTCODE HERE</div>
b) For tablet and Mobile add your shortcode to the generate_after_slideout_hook
This will appear below the Menu. There is also the Off Canvas Widget area that positions in the same place.w
