CSS - Hide GlobalNav/Hamburger for public users

[bondurantdt]

Hello,

We have a specific use case to hide the global nav for public users when viewing a course. I have successfully hidden this for laptop/desktop users using the no-user class to trigger off of. I do not see a similar class for the mobile version of the page. Does anyone have ideas on how I could hide either the hamburger icon and/or the global nav while viewing on mobile?

For example, here is what I am using for desktop

.ic-app-header.no-print.no-user {

display: none !important;

}

Thanks!

[seanbeirnes]

Hello @bondurantdt,

I do not think this is possible. The Canvas mobile apps are written using a mixture of React Native and OS specific code (Kotlin for Android and Swift for iOS). Not everything in the mobile apps are web elements, some buttons/links are native UI elements, especially when it comes to the main navigation links. In those cases, any CSS or JavaScript modifications will have no affect on them.

[bondurantdt]

Hey Sean,

Thanks for the reply. I'm able to hide the element using CSS, but just noticed that the no-user class is not on that element so the only way to hide it was globally, in this case,

#mobile-header .mobile-header-hamburger {

display: none !important;

}

I'm just interested if there is a way to hide that just for public users instead of for all.

[seanbeirnes]

Oh, I see. I read "mobile" and though you were talking about the Canvas mobile apps, but it sounds like you are just talking about the web view for mobile browsers.

I will preface this by saying that any option you choose could be undone by a user. CSS can be unhidden and the JavaScript solution (below) can also be prevented from running.

I am not aware of a similar CSS selector for the mobile view like the one you mentioned for desktop, but some JavaScript could do it. It looks like the specific CSS class you will need to hide is "mobile-header-hamburger." The ENV.current_user object will be empty when a user is not logged in. Therefore, "Object.keys(ENV.current_user).length == 0;" in JavaScript will be true if the user is not logged in. The tricky part is getting your JavaScript to execute at the right time. There have been other threads here about using mutation observers to solve this, so it is best to have a decent understanding of JavaScript before diving into that option.

[dtod]

You could use the "has" option.

#application:has(#global_nav_login_link[href="/login"]) {
	#mobile-header{
		display:none;
	}
}

[seanbeirnes]

That is a good idea, @dtod! However, the nested CSS module is not yet compatible with all mobile browsers, especially Android, so it may be better to turn the selector into a one-liner like so:

#application:has(#global_nav_login_link[href="/login"]) .mobile-header-hamburger {
    display: none;
}

I also swapped #mobile-header for .mobile-header-hamburger because otherwise the entire header, including the course navigation, would be hidden.

Keep in mind that the :has() CSS pseudo class also still lacks support on some mobile browsers, but not to the same extent as nested selectors.

[bondurantdt]

Appreciate all the ideas!

[michael5]

This may or may not be helpful but depending on your JS skills, I'm pretty sure you can use Canvas environment variables to identify if a user is anonymous (ie. not signed in). I have some sub-accounts where I use these variables to hide/show different elements depending on whether or not a teacher, admin or student is signed in, albeit I've never targeted anonymous users so there may be some things that I'm unaware of.

The environment variable ENV.current_user_roles is a JS array that includes all the roles the current user has. If you want to analyze it, open any page on your Canvas instance, right-click anywhere and hit inspect. Find the console in the developer tools that are now open and type: console.log(ENV.current_user_roles)

If you're an admin, you should see a list with several roles. If you're a student, it should only contain one. If you're not signed in, the array should be empty, so in theory you could just use JS to check "if the length of ENV.current_user_roles is equal to 0 or non-existent, hide X element with X CSS id/class". Or more precisely:

let user_roles = window.ENV?.current_user_roles || []; // default to empty array if variable isn't found (I think this might occur, not sure)

let element_to_hide = document.getElementById("css_selector"); // or get elements by class name if id not available or you need the whole class removed

if (user_roles.length === 0) {
  div_element.style.display = "none"; // hide defined element if the user has no "user_roles" attached to them
}

If you only want to do this when the user is on mobile (ie. small screens) you can also use JS to query the browser about screen sizes or the OS of the device being used... but I'm so rusty with JS I can hardly remember what is possible, but it is for sure possible. 🙂