John Li's Blog Site

CSS Tricks for Hero and Sticky Menu

April 21, 2019

Allright, I am not a web designer or front end developer. But from time to time, some small things do require my attention to get it done quickly. That’s why I found it’s useful to have some experience with CSS and the newer modern CSS. Yes I mean the stuff like SCSS, Styled Component, Rebass etc etc. It can quickly go crazy since the universe is so big. :-)

I need to convert one of the web front page in a framework code to use a bigger hero header and sticky menu on the top. Tried some of the react component but they don’t work very well. Eventually I dived into the magic code base behind the scene and finally get everything works properly, and one different devices.

Here is some of the good resource I found very helpful to go through the journey.

A Responsive CSS Hero Background Image with Opacity and Color Overlay that Does Not Affect Text

How TO - On Scroll Header Check out “how to create a fixed/sticky header on scroll with CSS and JavaScript”.

Thanks a lot for the very detailed explanation. I also created a codepen practice here.

Left a small issue in the codepen practice, please have some fun to fix it. Enjoy!

John Li

John Li's stuff for work, study and social activities

You can follow him on Twitter