Jump to content
View in the app

A better way to browse. Learn more.

Invision Community

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Invision v5 navigation: are mobile and tablet menus (hamburger / “More”) fully CSS-controllable?

Featured Replies

As you know, we’re working with a trial of Invision Community v5 Pages as we are considering bring a portion, if not all, of our huge Weebly website over. And are intentionally trying to separate navigation between Pages (reference/library content) and Forums (community content) so it looks like our forum is standalone from the "library" on Pages.

On desktops we’ve successfully controlled menu visibility by app context (Pages vs Forums) using theme CSS.

However, we’re seeing inconsistent behavior on mobile and tablet iOS devices, and before making architectural decisions I’d like to confirm what is and is not supported by the platform.

What we’re observing

• iPhone (Safari and Chrome):
When viewing Pages content, the hamburger menu still shows forum-related items (Activity, Browse, About), even though those items are hidden via CSS elsewhere.

• iPad (portrait and landscape):
When viewing Pages content, the “More” menu appears but is empty. This is probably because the items that would normally populate “More” have been intentionally hidden via CSS; however, the responsive menu still renders the “More” container itself.

We have not yet tested Android devices, so we are not assuming identical behavior there.

Questions

  1. In Invision Community v5, are the mobile hamburger menu and tablet “More” menu rendered from the same theme/DOM layer as desktop navigation and therefore intended to be fully controllable via custom CSS?

  2. Or are the mobile and tablet navigation elements generated by responsive or device-specific logic that is not designed to be selectively modified or hidden via CSS on a per-app (Pages vs Forums) basis?

  3. Is it supported to hide or alter mobile and tablet navigation items based on app context using CSS alone?

  4. Is the behavior described above on iOS (persistent hamburger items; empty “More” menu after items are hidden) considered expected behavior or a known limitation of responsive navigation in v5?

A clear explanation of what is and is not supported across desktop, tablet, and mobile would be very helpful, as this will determine whether we attempt to present Pages content as visually standalone on smaller devices or accept unified navigation there.

Thanks for the clarification.


Gary

  • Author

Well, I guess I didn't ask that correctly and confused everyone. But I've learned a lot and taken a different direction so want to restate the problem.

We've quit trying to do this via CSS and are now trying to do it via menus. What we have is three top-level menu items:

  • Forum as a sub-menu with other forum-related stuff under it, like an About page, Activities, and Browse

  • Library as a sub-menu with other library-related stuff under it, like a different About page, the start of a database to serve as "card catalog" to tell people where to go

  • About Bullnose Enthusiasts - a page with nothing under it.

This works, but when we click on something in the dropdown below either Forum or Library both Forum and Library go away and all we are left with is About Bullnose Enthusiasts and an empty More. It seems like we are doing something incorrectly as we expected at least the menu section we are in, either Forum or Library, to show - if not both.

Can anyone tell me what we are doing wrong? Please?

  • Author

And I should have said I'd be happy if both menus stayed, but can live with just the one that we've drilled down into.

Recently Browsing 0

  • No registered users viewing this page.

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.