Is there a way to have a navigation button actively display only for mobile users?

[canvas_admin]

I would like for the "Discussions" button to appear in the navigation menu when users are accessing the course via the Canvas mobile app (android and iOS), but have it hidden when users access the course via a web browser on a laptop/desktop.   Does anybody know if this would be possible and, if so, how they might go about doing it?

[MattHanes · Accepted solution]

You can hide it with custom Javascript but if they know the URL, they will still be able to get to the discussions page. For example, the following code will hide the Discussions tab for everyone that is not an admin.

if (ENV.current_user_roles.indexOf("admin") < 1){
  $( document ).ready(function() {
$('#section-tabs a.discussions').hide();
});
}

[canvas_admin]

Matthew,

Thanks for your response.  I've tested it out and it works beautifully.

Now, can one go in the other direction?   Can one hide a navigation button (or LTI) in the mobile app but have it appear in the web browser version?

[MattHanes]

I don't think that's possible because the Canvas app gets it's content via API calls so you can't really hide anything from the API.

[tktaylor]

I've done some tricky stuff with CSS and @media query to show/hide content for mobile/desktop, but it may have limited use.  I haven't done anything with the Canvas mobile app, so I'm not certain if it's possible to change the CSS, or if this suggestion is useful.

Near the top of my CSS, I have these classes, which shows the button on large screens (desktop), and hides on small screens (mobile).  The class names are counterintuitive without documentation.  I have comments in my CSS that clarifies which class does what, otherwise I would be confused coming back to this code months later!

.hide-lg-screen {

  display: block;

}

.hide-sm-screen {

  display: none;

}

Further down in the code, there is a section for mobile layouts.  On a screen that is smaller than 600px, it will hide the button on large screens (desktop), and show the button on small screens (mobile).

@media only screen and (min-width: 601px) {

  .hide-lg-screen {

    display: none;

  }

  .hide-sm-screen {

    display: block;

  }

}

In my HTML, I stick whichever class I want to hide the button on whichever screen resolution.  If I want to hide the button on mobile, add hide-sm-screen.  If I want to hide the button on desktop, add hide-lg-screen.