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.

Scrolling Persistent Breadcrumbs

Featured Replies

Hi there, hard for me to describe the actual feature I need, but is there a way to make the 'breadcrumbs' at the top of the forum to be persistent and remain visible when vertical scrolling? Is this something that can be done with CSS or Javascript or an actual feature that can be triggered with the theme editor?

image.png

Edited by Kyle_H

  • Community Expert

Hi Kyle,

I fully expect there are better ways to achieve this, but this works. If it is what you seek is another matter.

/* Breadcrum container padding */
.ipsLayout__primary-column {
  padding-top: 65px;
}

/* Sticky breadcrum menu */
.ipsHeaderExtra__start div nav.ipsBreadcrumb.ipsBreadcrumb--top {
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid grey;
  position: fixed;
  top: 210px;
  background: #ddd;
  z-index: 10;
}

I have not attempted to make this compatible with light/dark mode. But I expect I can if you need this - but probably not today - I need to hunt around.

You will need change the numbers there to suit your situation. And if you have multiple themes, you will definitely need a more robust solution (or edit the CSS for each theme).

  • Author

Thanks, I'll use this as a starting point!

6 hours ago, Como said:

Hi Kyle,

I fully expect there are better ways to achieve this, but this works. If it is what you seek is another matter.

/* Breadcrum container padding */.ipsLayout__primary-column {
  padding-top: 65px;
}

/* Sticky breadcrum menu */.ipsHeaderExtra__start div nav.ipsBreadcrumb.ipsBreadcrumb--top {
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid grey;
  position: fixed;
  top: 210px;
  background: #ddd;
  z-index: 10;
}

I have not attempted to make this compatible with light/dark mode. But I expect I can if you need this - but probably not today - I need to hunt around.

You will need change the numbers there to suit your situation. And if you have multiple themes, you will definitely need a more robust solution (or edit the CSS for each theme).

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.