The header blocks the target mathematical equation after clicking on an equation reference about hugo-theme-meme

[reuixiy]

Yes you can customize it by yourself, simply adding

.header {
    position: relative;
}

.main {
    padding-top: 3em;
}

to your ~/blog/assets/scss/custom/_custom.scss file.

See https://github.com/reuixiy/hugo-theme-meme#customize-meme

[reuixiy]

I have reproduced this in my Chrome browser.

But it shouldn't happen, the latest fix for #158 is

hugo-theme-meme/assets/scss/layout/_header.scss

Lines 75 to 78 in 9ccd079

	/* Scrolling fix for anchors being hidden below the header */
	*[id] {
	scroll-margin-top: var(--header-height);
	}

Using scroll-margin-top for all HTML elements have id attribute to fix the problem. As shown in the screenshot below, the <mjx-mtd> element also has id attribute, but this CSS rule doesn't apply!

Then I tested this in my Safari browser and it works normally. So I think this is a upstream browser bug which caused scroll-margin-top doesn't apply to custom HTML elements.

[searene]

@reuixiy Thanks for the reply! I actually ran the webpage in Edge, and it didn't work either. Maybe it's because Edge and Chrome are the same at the core. Considering that most upstream browsers usually take a long time to fix a bug, I don't expect this bug to be fixed by them soon. So maybe we can find a way to work around the problem in the meantime. For example, can we give the user an option to stop fixing the header at the top? It could be like the header in Hacker News, the header won't move along when the user scrolls up or down. It's just like other parts of the webpage, when the user scrolls away, it disappears. It has two advantages:

1. The header won't block the text anymore, because it's always appearing above any contents.
2. It can be taken as another style of the website, giving the user another option, even if the user is not bothered by the current issue.

Please kindly consider this suggestion :)

[searene]

@reuixiy I just tried it, and it worked! Thanks for the solution!