Custom CSS: Fixed Breadcrumb list

🌈Share & Showcase
#1

This CSS makes Breadcrumb list to display always top of a document.

Normally, Breadcrumb list is scrolled and moved to upper invisible place when you scroll a document.
This CSS blocks that.

Screencast: https://youtu.be/9wV2NYQ2U0U

Edited 2020-05-18: Fixed document width problem.
Edited 2020-05-22: Keeps the Eye and Search button locked. Thanks, Alan.

.DocumentTools {
    position: fixed;
    top: 30px;
    z-index: 2;
}

.DocumentContainer {
    overflow-y: unset;
}

.DocumentBreadcrumb {
    width: inherit;
    height: 1.2em;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    margin: 0;
    padding-top: 0px;
}

.is-mobile .DocumentBreadcrumb-item {
    position: relative;
    top: -1em;
}

.is-mobile .DocumentBreadcrumb-delimiter {
    position: relative;
    top: -1em;
}

.Document {
    position:fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    top: 1.2em;
    height: calc(100% - 2em);    
    max-width: 100% !important;
}

.is-mobile .Document {
    top: 2em;
}

.node-tag {
  color: #E54500;
}
8 Likes
#2

Edited for mobile app.

#3

Can you post a screenshot example? I don’t understand.

[edit: nevermind, I get it now, I looked up breadcrumb trail, it is UI term for the document > item 1 > child 1 > grandchild 1 text that is at the top of Dynalist when you drill into items.]

#4

@BigChungus Thanks for reply.
I recorded screencast.
You can see it at https://youtu.be/9wV2NYQ2U0U

1 Like
#5

Fixed a bug (The search box was invisible on PC).

Sticky Breadcrumbs and/or Title Bar
#6

This looks useful!

But why does DynaList even hide this? Particularly on mobile with a very large document, this lack of context/mobility is a usability issue.

#7

Yes, as I get into having longer and longer documents, I find that having this as a built in feature would be very useful.

#8

This seems like a very useful feature. However, I’m having trouble using it—I pasted the CSS into the preferences section but don’t notice any changes.

Best,
Jeremy

#9

Thanks for trying my css.

My circumstance is still working properly.
So, Paste your css copied from your preference section('Dynalist Pro->CustomCSS) to here.

#10

Hi Choni,

Thank you for the note! I see now that it does seem to be working; it’s just behaving differently than I expected.

  • I was thinking that it would automatically show the breadcrumbs to the list item you’re currently viewing. It’s hard for me to find an example of the behavior, but it’s something like this:

300×533 208 KB

Except instead of the search bar, it’s the breadcrumb trail all the way down to your current bullet (not just to the current level of zoom).

  • Also, there is an issue where the width of the page isn’t able to expand beyond a certain width (note the gap between the scroll bar of the main page and the keyboard shortcut reference):

image
image1436×513 120 KB

Best,
Jeremy

#11

Hi, Jeremy.

Thanks for your issue report.
I fixed it and edited css of the first post.

#12

One fatal error: Ctrl-End and Ctrl-Home fail to scroll the document with this on. Two lines seem to cause this, but without we don’t get the Breadcrumb sticky:

/*.DocumentContainer { overflow-y: unset; } /
/.Document { position:fixed; overflow-y: scroll; overflow-x: hidden; top: 1.2em; height: calc(100% - 2em); max-width: 100% !important; }
*/

Consequently I implemented mobile only:

/* static breadcrumbs */
.is-mobile .DocumentTools { position: static; z-index: 2; } 
.is-mobile .DocumentContainer { overflow-y: unset; } 
.is-mobile .DocumentBreadcrumb { width: inherit; height: 1.5em; position: fixed; top: 0; left: 0; z-index: 1; margin: 0; padding-top: 0px; font-weight: 600; } 
.is-mobile .DocumentBreadcrumb-item { position: relative; top: 0.1em; } 
.is-mobile .DocumentBreadcrumb-delimiter { position: relative; top: 0.1em; }
.is-mobile .Document { position:fixed; overflow-y: scroll; overflow-x: hidden; height: calc(100% - 2em); max-width: 100% !important; } 
.is-mobile .Document { top: 2em; } .node-tag { color: #E54500; }
#13

Hello, Alan.
Thank you for your report.

Sorry, I don’t know how to fix Ctrl-End and Ctrl-Home issue.
But, we can avoid this scroll problem.

Can you use

  • Ctrl+Home and Right Arrow instead of Ctrl+Home
  • Ctrl+End and Left Arrow instead of Ctrl+End
#14

Thank you for the tip. I have a fix for you:

  • .DocumentTools { position: fixed; top: 30px; }

Keeps the Eye and Search button locked with the breadcrumb line. It could be top:0; That works in Chrome but in the app the icons are z-hidden at 0.

EDIT: had to remove it. your tip works on small documents. It does not on larger ones. I simply cannot get it to scroll with keys.

#15

Wow, your css is very useful.
I apply it. Thanks.

I wonder why this would not be default setting.

#16

It actually is default, but your tweaks invalidate the CSS way they implemented it.

#17

Oh, thx.

#18

I found a way that works better. Only complaint now is when Ctrl-Home, it goes to the line below the title (as it always has) and the title remains offscreen. I do wish the Page Title was part of the Crumbs but that’s up to the programmers. It is part of the tab title though.

/* Sticky breadcrumbs */
.DocumentBreadcrumb {
margin: 0; padding: 0; min-height: 0;
z-index: 5;
position: sticky;
top: 0; left: 0;
background-color: #feffff;
}
.DocumentTools { margin: 15px; z-index: 5;}

Explanation: sticky keeps the breadcrumb on top of the document. z-index: 5 makes it overtop the document.
background-color is needed so it’s not transparent.

I chose very-nearly white. This doesn’t follow the theme. You could make it follow the theme by making background-color: inherit, but this only works if you also set all the parent items to :inherit, because transparent is the default.

3 Likes
#19

Thank you, the css is ok. Fixed Breadcrums is very esencial to have fast navigation. Dynalist copied bad the Breadcrums function from Workflowy. Erica must correct the function.

1 Like