The header on the Notable theme in Blogger sticks to the top when you are scrolling down, that's a neat design and good thing for mobile users who may otherwise find it difficult to scroll all the way up to access the navigation menu.
The value 0.8 is the opacity of the header, it can be anywhere from 0 to 1.0, setting it 0 will cause the header to be completely transparent so we do not want that. You may change the value to your needs and then add it to your blogger.
In this post we will use a small CSS snippet that let's you make the header semi-transparent or in simple words a see-through navigation menu. You can set the opacity yourself to fit your needs since you may want it to be less or more opaque.
Our posts are known to stretch a little bit too much so we are going to keep this short because there's not even much to it. There's a CSS snippet that you add to your blog's theme, that's all.
The CSS we will need. Note that this is for the Notable Blogger Theme, this may or may not work with other themes.
header.centered-top-container.sticky {
opacity: 0.8 !important;
}
The value 0.8 is the opacity of the header, it can be anywhere from 0 to 1.0, setting it 0 will cause the header to be completely transparent so we do not want that. You may change the value to your needs and then add it to your blogger.
How to add the CSS code?
- Log-into your Blogger Dashboard
- Go to the Theme
section - Click on "Customize"
- In the Theme Designer go to Advanced > Add CSS
- Paste the CSS snippet into the text area on the theme designer page and click on "Apply to Blog" on the top right
That's done. Now refresh your blog to see the changes.
If you have request for tutorials for other Blogger themes then please do comment below.
