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?

Edited June 11Jun 11 by Kyle_H

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).

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).

@Kyle_H

In case you need it (dark mode):

https://invisioncommunity.com/forums/topic/487325-best-practices-to-design-for-light-and-dark-mode/

This should work 🤝

/* Sticky desktop breadcrumbs */
.ipsHeaderExtra{
	backdrop-filter: blur(40px);
	position: sticky;
	top: 0;
	z-index: 6;
}

9 hours ago, Ehren said:

This should work 🤝

/* Sticky desktop breadcrumbs */.ipsHeaderExtra{
	backdrop-filter: blur(40px);
	position: sticky;
	top: 0;
	z-index: 6;
}

@Kyle_H