[CSS HELP] How to move the breadcrumbs plugin down when banner is loaded (if possible)

[wychwitch]

Hello! I hope it's alright for me to ask this here, but I've been trying to figure out how to get the banner to play nicely with the breadcrumbs plugin for a while now. I'm very inexperienced with CSS so please bear with me if this is an obvious question;

I have two plugins that display at the top of my note: breadcrumbs and metatable. I managed to edit metatable's css using a snippet found here to scoot it down when a banner is loaded, but I cannot figure out how to do the same for breadcrumbs.

This is my css edited snippet for my metatable plugin, and below are a couple screenshots showing the issue.

.code-block-wrap.obsidian-banner-wrapper {
	position: initial;
  margin-top: 200px;
  margin-bottom: 0;
}

The file w/o banner

Banner turned on, covering breadcrumbs but metatable was appropriately pushed down by banner

Is there something I'm missing to affect breadcrumbs as well? If it's impossible to mess with breadcrumbs, could the banner be scooted down a bit with css and have breadcrumbs accessible from above?

Thanks again, and if this doesn't belong here I'll gladly move it!

[noatpad]

Hi! So sorry about the late reply, but I took a look at this. So it looks like this is an issue of the banner covering the breadcrumbs container. It's a tricky thing because the Breadcrumbs plugin places the container in a peculiar spot, so it's not something to fix easily with CSS because of how the banner is placed and styled.

As a band-aid fix though, what you could do is simply move the banner further down with this snippet:

.obsidian-banner {
	transform: translateY(60px);  /* or whatever amount you need to move it */
}

You can also apply this to only certain notes if you need to, by adding a cssclass: some-special-name to the YAML of the notes you wanna apply to, and updating your snippet as such:

.some-special-name .obsidian-banner {
	transform: translateY(60px);
}

Unfortunately that's the best one can do for now. I can try looking into this more and apply some patch in a future update, but it might work best that the Breadcrumbs dev can accomodate for the banner, given the dynamic content and views it has. Hopefully this helps for now!

[wychwitch]

Thank you!! That works for now!! I'll open up an issue in that plugin's page to hopefully provide support for this!

[SkepticMystic]

@WychWitch @noatpad hey :) Thanks for noting this issue with Breadcrumbs. I don't know CSS very well, so do you have recommendations on what I could do to accommodate? There are reasons I place the Breadcrumbs view where it is, but maybe that can be adjusted.

[noatpad]

@SkepticMystic Hihi! So ideally, it would make sense to place the breadcrumbs right below the banner, but given where the breadcrumbs is placed in the DOM, that can prove to be tricky (my Banners view is deeper down the DOM tree, but has position: absolute to place itself at the top). The next option would be above the banner, but I'd need a way to detect the Breadcrumb view so I can move it slightly, hmmm.

So idea, can you add an extra class to the Breadcrumbs view's immediate parent (.markdown-preview-view) whenever it's visible in a note? Something simple like .has-breadcrumbs or something can do. That way I can detect there's a breadcrumb view in play and I can style it appropriately from my side, and I'll see what I can do from there.

Another question I have is if the Breadcrumbs view can change height when inside a note at any time or if it's static once the view's loaded? Just in case if I have to put the view above the banner and have to react accordingly

[SlRvb]

@noatpad I'm think that it might actually have to be the Banner plugin at adds some class to the .markdown-preview-view selector. Since the breadcrumbs is up higher in the DOM than the banner, it would be pretty hard to maybe add a margin to the breadcrumbs trail to push it under the banner.

Maybe adding a class like .has-banner class onto the .markdown-preview-view would be the best way to go as you can just add this css to the .BC-trail selector that's right below it and push the trail down under the banner:

.markdown-preview-view.has-banner .BC-trail {
    margin-top: var(--banner-height) !important;
}

[SkepticMystic]

Thanks for trying to resolve this :) Let me know if adding the class solves the issue, otherwise I can try do something on my side