Breadcrumb Trail - Keep Account settings

API & Custom Code
1

Hi All

I have used the following code to remove the breadcrumb trail at the top of the screen.

$(document).on(‘knack-scene-render.any’, function(event, scene) {
$(“.kn-crumbtrail”).hide();
});

However this changes the position of the account settings that I would like to retain on the RHS.

Any ideas on what I would need to add here?

2

Hey @SteveRobin63604, instead of JS, you can do this a lot simpler in the CSS code, assuming you want to always hide the crumbtrail.
Using visbility:hidden will hide it, and won’t shift other elements.

.kn-crumbtrail {
  visibility: hidden;
}

If you want to apply it to particular scenes only, you can use your existing JS method with a minor tweak:

$(document).on(‘knack-scene-render.scene_xx’, function(event, scene) {
  $('.kn-crumbtrail').css('visibility','hidden');
});
1 Like
3

I have tried using the suggested css and it doesn’t appear to work?

4

Hmm, maybe try adding !important like so?:

.kn-crumbtrail {
  visibility: hidden !important;
}
5

Unfortunately this hasn’t worked either!!

6

That’s definitely the right code, and I’ve tested it in my CSS with success.
Maybe try:

  • Pressing Ctrl+F5 to reload your live app
  • Clicking the Save Code button on CSS page a couple of times
  • Checking that there’s no other code in your CSS/JS that is interfering with .kn-crumbtrail
7

I have very little CSS or JS stored on the app which I have checked and still not getting this to function as expected. I did have success removing the crumbtrail using JS as per my original post but the problem was the account settings moving from the RHS to the LHS. I am thinking that I need to find a solution to push this back to its original position.

8

@SteveRobin63604 just sent you a direct message with a Zoom link if you’d like me to quickly diagnose for you.

9

For everyone else, we solved it by removing some stray curly braces {} in the CSS code.

10

In the Next-gen app, this CSS code snippet worked for me

/* Hide Breadcrumps */
.kn-breadcrumbs {
display: none !important;
}

1 Like