Header Semi-Transparent On Scroll Turns Solid White On Hover

Store Design
,
1

Hello Experts!

This is a multiple question discussion.

  1. I recently made my header semi-transparent on scroll. However, I would like for it to turn solid white when I hover over while scrolling. If that makes sense?

  2. How could I make it so that my semi-transparent header ALSO blurs the background behind the header as well?

I basically want my header to function exactly like this companies website: WrldInvsn

MY WEBSITE: Wholesome Boy

How my header currently looks on scroll:

278a7b23490dc7a28735e090fe78ee8e.png
278a7b23490dc7a28735e090fe78ee8e.png1899×376 349 KB

Thanks,

Justin

2

Please add this code at the bottom of your base.css file to do your request.

.scrolled-past-header:hover .header-wrapper--border-bottom {
  background: #fff !important;
}
1 Like
3

This is not working on my end.

I added the code and nothing has changed.

You can see here: Wholesome Boy