[Resolved] How could I switch menus for Mobiles?

[George]

Hello,

This is the dilemma I have. I have some very functional pages that use unique coding, however the content will be too wide for a mobile phone. So I was considering creating specific Mobile Version pages for these 4 pages that I have for desktop users so it looks decent on a mobile phone.

Right now, these pages are easily seen on a regular menu for desktop users and in my CSS I hide the secondary menu from mobile users, since the content doesn’t view properly with Mobile users.

Instead of hiding the menu, I’d simply like to use an alternating menu for Mobile users — which then points to the “specific” mobile pages I’d create for these 4 pages.

How could I implement this? Should I implement via functions.php?

Thanks,

George

[George]

Could I use the mobile function in wordpress to do it?

<?php
if ( wp_is_mobile() ) {
display mobile sub menu
}

else {
display normal sub menu
}
?>

[Tom]

Hi George,

So you want to replace your current menu items in the secondary navigation on that specific page for mobile related menu items? Would this only happen on those specific pages, or site-wide? How many menu items are there?

[George]

Only the Submenu would change. It would be state-wide — so that only mobile users would see the “mobile” created pages which are nearly identical to normal pages (but elements reduced so that it looks proper) on a cell phone.

Also, I have a slider photo running stories — right now I have it “set to display: none” however I realize the best thing to do is to remove it from mobile phones since it’s probably loading those images (10 images) to speed up time of delivery.

How should I remove this via functions.php?

Thanks,

George

[George]

Could I use a code similar to this?

function is_mobile() {
// Get the user agent
$user_agent = $_SERVER[‘HTTP_USER_AGENT’];
// Create an array of known mobile user agents
// This list is from the 21 October 2010 WURFL File.
// Most mobile devices send a pretty standard string that can be covered by
// one of these. I believe I have found all the agents (as of the date above)
// that do not and have included them below. If you use this function, you
// should periodically check your list against the WURFL file, available at:
// http://wurfl.sourceforge.net/
$mobile_agents = Array(
// List of mobile agents
);
// Pre-set $is_mobile to false.
$is_mobile = false;
// Cycle through the list in $mobile_agents to see if any of them
// appear in $user_agent.
foreach ($mobile_agents as $device) {
// Check each element in $mobile_agents to see if it appears in
// $user_agent. If it does, set $is_mobile to true.
if (stristr($user_agent, $device)) {
$is_mobile = true;
// break out of the foreach, we don’t need to test
// any more once we get a true value.
break;
}
}
return $is_mobile;
}
You can then call the function to wrap whatever you want like this:

if (is_mobile()) {
// Place code you wish to execute if browser is mobile here
}

else {
// Place code you wish to execute if browser is NOT mobile here
}

[Tom]

You might be able to do this without using PHP – I’m just trying to understand exactly what’s needed.

Instead of creating two pages, one for desktop and one for mobile, you can show/hide elements depending on screen size.

For example, elements (images, text, sliders) that you want to hide on mobile, can be wrapped with a “hide-on-mobile” div:

<div class="hide-on-mobile">
      Anything in here (images, text, sliders etc..) will not show up on mobile sized screens.
</div>

You can also do it for tablets:

<div class="hide-on-tablet">
      Anything in here (images, text, sliders etc..) will not show up on tablet sized screens.
</div>

And desktop:

<div class="hide-on-desktop">
      Anything in here (images, text, sliders etc..) will not show up on larger screens (desktop).
</div>

You can also add these classes to menu items in “Appearance > Menus”. Go to the top right and click “Screen Options” and check the checkbox next to “CSS Classes”.

Then expand your items, and add these classes as necessary.

That’s probably your easiest route to take 🙂

[George]

Hello Tom,

I figured out how to do it after a good nap! 🙂

You can consider this closed.

God bless,

George

[Tom]

Awesome, thanks! 🙂

[Author]

Posts