Hiding menus depending on device not working

Classic Stacks
1

Hi, I have come across similar problem on other threads but not specifically menus.

I have 2 menus depending on device.

(1) A Desktop menu (using Seydesign my menu)
(2) A Mobile menu (using another but static Seydesign my menu)

Scenarios:
A - I would like the (1) menu to show on desktop devices and not on iPad or mobiles.
B - I would like the (2) menu to show on iPad or mobiles devices and not on desktop.

Ok - so my 1st attempt was 2 have the 2 stacks on a page but then turn off the responsive icons for the stack to reflect what devices are being used. Unfortunately this has no affect.

So, after reading a similar thread on here I downloaded Will’s Useful Stack and added the menu stacks into there and selected the hide option in the inspector for devices smaller than (tried many different sizes without anything being hidden).

Eventually I may have to go down the route of designing a mobile only website but a shame as the other aspects of the site are responsive.

Any ideas?

Thanks

2

Not knowing any more info URL, theme, etc.
All I can say is in general you will need to override the CSS Using a media query.
That may be exactly what useful stack does (I don’t have that one).

If you share a URL you can get a more detailed answer.

3

RottenApple might be a better choice of stack to be using. It will look for specific device user agents, like iPad, iPhone, Android and NOT screen size.

2 Likes
4

Hi, thanks for your replies swilliam and Will

I did try the RottenApple stack wWill but unfortunately both menus appeared on DT & Mobile when browsing.

I have decided too create a mobile only site and use mobilise to switch device (I used it for years before so hopefully it will still work). I can then design specifically for each device.