Banner overlaps properties when "Properties in document" is set to "Visible"

[AdotBdot]

As the title says. To reproduce simply add properties and banner to a note. I don't think other plugins I use are the issue but I also use: Advanced Tables, Completr, Emoji Toolbar, Excalidraw, Iconize, Image in Editor, Image Layouts, Latex Suite, Remotely Save and Text Format.

[raven2cz]

Same problem here...

[viktoracevedo]

same problem :(

[Mateusz-Dobrzynski]

Same here. I created an empty vault to make sure this issue is not caused by other plugins I use and I can confirm – it occurs also with the most default of Obsidian settings.

[tejas-hosamani]

How to fix

Step 1: Install this plugin

Step 2:

Create a directory/folder with exact name css-snippets at root of your vault. Create CSS file inside this folder, name doesn't matter. Follow the instructions given in the plugin above. Note: You can't adit CSS file inside Obsidian. You need to open this file in some other text editor.

Step 3:

Copy & paste the following snippet in the CSS file that you have created:

.obsidian-banner-wrapper {
    margin-top: 0;
    padding-top: 0;
}

.mod-header {
    margin-top: calc(var(--banner-height) - 30px);
}

Note: You can customize how much space you want between image and front matter by updating the 30px in the CSS snippet above

Step 4: Reload Obsidian

---

This is how fix looks like:

Before	After

[Mateusz-Dobrzynski]

@tejas-hosamani, Obsidian supports snippet management out of the box in Settings > Appearance > CSS Snippets. Once a snippet is active, Obsidian re-renders its view every time the snippet is modified. Since the plugin you submitted was last updated 4 years ago, I infer it must've been created when snippets management was not as easy as it is now.

I tested your snippet in a clean, default vault and it worked fine. In my customized vault, however, it created excessive top margins in note embeds and previews. I modified your snippet like this:

.metadata-container {
    margin-top: calc(var(--banner-height) - 10px) !important;
}

.obsidian-banner-wrapper {
    margin: 0;
}

Snippet by @tejas-hosamani	Snippet by me

I'm leaving this piece of code for anyone who encounters a similar issue.