Have the Page Title or Block BreadCrumbs as an always visible overlay at the top of the screen when scrolling down

Questions & Help
1

Hi, I am constantly scrolling down quite large journal pages and often loose track of what date page I am on. Is it maybe possible, with CSS, to have the Page Name or Journal Date to remain on screen even if the content would likely scroll it off screen?

In the Inspector i see it’s this one:

image
image1398×534 51.9 KB

1 Like
2

I managed some…

.ls-page-title {
    text-align: left;
    position: fixed;
    top: 0;
    transform: translate(-15%, 2%);
    z-index: 999;
    width: auto; /* Adjust width as needed */
}

I had no luck to center it to the center-pane and have it re-adjust correctly when the right sidebar would be triggered so I ended up leaving it left-aligned.

1 Like
3

I have also managed with Breadcrumbs:

.breadcrumb.block-parents.my-2 {
    text-align: left;
    position: fixed;
    top: 0;
    transform: translate(-15%, +60%);
    z-index: 999;
    width: auto; /* Adjust width as needed */
}

Until anyone with css knowledge chimes in, this is my best as I use the Inspector to find the appropriate div and work with chat-gpt to iron out kinks … :see_no_evil:

4

You just need

.flex.flex-row:has(.ls-page-title) {
        position: sticky;
        top: 0;
        z-index: 999;
        background: var(--ls-primary-background-color);
}
1 Like
5

Is there such an easy way to also keep breadcrumbs atop?

1692802035
16928020351324×256 51.5 KB

I have used:

.breadcrumb.block-parents.my-2 {
    text-align: left;
    position: fixed;
    top: 0;
    z-index: 999;
}

but it also catches all the breadcrumbs of Queries and stuffs them at the top in a mess … maybe there is a way to filter just the breadcrumbs of the block I am zoomed in onto …

6

Try:

.page > div > div > .mb-4:has(.breadcrumb.block-parents) {
        position: sticky;
        top: 0;
        z-index: 999;
        background: var(--ls-primary-background-color);
}

In general > is for performing checks to parent divs (in this case .page) and :has() to the children (in this case the right div is .md-4 that contains the breadcrumb).

1 Like
7

Works great! Thank you …

Now a harder one… is it possible on the journals page (where you scroll through all the journals) to have in the sticky position the journal Page Name that the content of is visible on the screen? So when I scroll and another journal’s Page Name gets to the one with the sticky position it replaces it as sticky atop of the screen?

I don’t know if I can explain better and this is a long shot as I expect this to be impossible to do with CSS…

9

Your code:

.flex.flex-row:has(.ls-page-title) {
        position: sticky;
        top: 0;
        z-index: 999;
        background: var(--ls-primary-background-color);
}

seems to work on the whole center pane, if I transform: translate it to move the title up a bit it moves the whole page-area around. Also z-index:999 manages to cover the Ctrl+F search. Solved this with z-index: 998.

The code I ended up with:

.ls-page-title.flex-1.flex-row.w-full {
        position: fixed;
	    transform: translate(-2%, 10%) ;
        top: 0;
        z-index: 999;
}

seems to only affect the Title Div itself.

Can you code target the Title alone?

10

The status atm is the following:

  • for the age-Title I couldn’t make it above the containing DIV as it was taking too much space in its sticky position and was too low on the screen;
  • for the breadcrumbs I could use the transform: translate even if it is still sticky and could move it up just under the window title bar (which I could not for the Page-Title).

I am quite happy with the result. Here is the code:

.ls-page-title .title {
    text-align: left;
    position: fixed;
    top: 0;
    transform: translate(-1%, 60%) ;
	z-index: 9;
	background: var(--ls-primary-background-color);
}

.page > div > div > .mb-4:has(.breadcrumb.block-parents) {
        position: sticky;
        top: 0;
        z-index: 9;
		transform: translate(-2%, -80%) ;
        background: var(--ls-primary-background-color);
}