Comments (4)
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
from hugo-theme-meme.
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
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.
from hugo-theme-meme.
@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:
- The header won't block the text anymore, because it's always appearing above any contents.
- 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 :)
from hugo-theme-meme.
@reuixiy I just tried it, and it worked! Thanks for the solution!
from hugo-theme-meme.
Related Issues (20)
- Edit me link in gitinfo has been broken in multilingual site HOT 1
- 字体如何更换 HOT 4
- Page Not Found HOT 1
- The home page is not displayed correctly. HOT 1
- 不蒜子页面浏览量展示错误 HOT 1
- 关于主题不能生成content内容的问题
- 关于页脚徽标
- markdown图片换行问题
- Rename default branch to main HOT 2
- Allow changing the order of post share items HOT 3
- Error building site
- latex use % cant show HOT 1
- 绑定到自定义域名不显示评论模块 HOT 1
- 极简页脚在英文的关于页面里不显示
- Build error caused by partials/components/fedishare.html HOT 2
- 如何修改菜单栏的字体大小? HOT 2
- 代码块语法高亮不起作用 HOT 1
- Netlify 部署后导航栏跳转失效 HOT 2
- 能否自定义归档界面的标题? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hugo-theme-meme.