Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 10 – Example #6 – Remove the Sticky Nav Menu on Mobile Devices

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Now that you understand what WordPress Conditional Statements are, we’re going to use one in the function we’re using to remove the sticky menu in this Genesis site from mobile devices.

Create a New Function

What we’re going to do is instead of add_action genesis_do_subnav that we used to move the menu in the first place, we’re going to create a new function. And that is function byob_show_sticky_menu_on_desktops_only.

Add Hook

I’m going to copy that and I’m going to take this up to our add_action and instead of genesis_do_subnav I’m going to say this.

Create the Condition

Then I’m going to create my condition, if. A conditional statement with an if, the condition exists inside of parenthesis like this. And the is_mobile syntax, wp_is_mobile this syntax. You can even see an example of it if wp_is_mobile, it either returns true or false, that’s all that it does.

So if wp_is_mobile and then you need opening and closing braces also. So everything that happens in this case, is if wp_is_mobile else. So this happens if it’s not mobile, this happens if it is mobile.

Let’s do it the straightforward way first. So if wp_is_mobile all we want to do is return. Return stops processing and moves on. So if it hides this return it leaves the if statement entirely which is what we want to do.

If wp_is_mobile then return else. Now what we want to do if it’s not mobile? If it’s not mobile we want to add that menu and let’s just do genesis_before.

Now, since our action has already been added, we can just use the function ‘genesis_do_subnav’ like that. Up here, ‘genesis_do_subnav’, this is referencing a function name, a function that actually exists.

If we come down here, we can call that action by simply calling it genesis_do_subnav. So now, the subnav is going to show up and once we’ve got our subnav to show up, then we can do an add_action.

We can take our add_action out of here and put it in this case. So if wp_is_mobile return otherwise, do the subnav and add to genesis_after. I clearly misspoke because I said that genesis_before was before the end, genesis_after is at the end so I want genesis_after there. And I can put this add_action inside of this kind of a conditional statement. So this is the condition, if and then opening and closing parenthesis and then the question.

Then if it is mobile we want it to return that essentially do nothing otherwise, genesis_do_subnav and then add_action ‘genesis_after’, byob_sticky_menu_script’.

Review the Changes on a Various Devices

Let’s save that, upload it and reload. Scroll down here and it’s showing up. Now, however, if I choose a different user-agent say the Nexus 7 tablet user-agent which is a mobile device, notice it no longer shows.

If I choose an iPad, it’s not going to show up but if I just choose my default that is the desktop device, it does. So that is how you can use a conditional statement.

Steven asks, “What’s this addon that I’m using?” This addon is the user-agent switcher for Chrome. Chrome has a quite a bit more cumbersome user-agent changing thing.

The nice thing about the Chrome’s user-agent is you can turn emulation and then you can select your device so Apple iPad and then it changes the arrangement although oddly enough it’s not working here. I probably need to just refresh it in order to get it think like an iPad, there we go. That’s all I need to do, is refresh it.

That’s the one nice thing about this, is that it changes the size of these so you can see what it looks like but otherwise, it’s not nearly as simple for testing. For example, somebody says “You can’t log on to my site in the new Samsung”. If I change my user-agent I’ll be able to test that behavior by switching that user-agent.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one