Navbar disappears on scroll, backdrop blur doesn't work on Chrome

Hi there! A little bit ago, I added a backdrop blur to my navbar with custom code that really brings the site together. However, I have two issues I was hoping to get some help with:

  1. There seems to be an issue with my nav bar where, upon scrolling up and down, all but the blurred background disappears. I’m getting this on Safari specifically, because…
  2. I can’t seem to get the backdrop blur to work on Chrome. I’ve copied the code from examples and from apple’s own website, and I know it’s a supported property, but I can’t get it to work for some reason. Seeing as most people are on Chrome, I’d like that to work if possible.

Any suggestions or tips would be welcome.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

You need to change .example-class in your code.

Thanks for your reply,

It looks like that was from a previous attempt I forgot about. I’m trying to do it through a custom HTML tag called Blur Background on the nav symbol. I’ve deleted the .example-class code, as they both do the same thing. I’ll add it below in case you can see something wrong here:


  .nav {
    background-color: rgba(255, 255, 255, 1);

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .nav {
    background-color: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);


And here’s an updated link in case it’s easier to see on the site.

So I got a chance to look at this again. I think maybe the Global Nav Div Container might be causing the problem and isn’t really necessary anyway. So I pulled the navbar out and re-styled the .container .nav.

So the structure looks more like this:
Screen Shot 2021-06-30 at 4.02.47 PM

And using this simplified code:

  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);

Gets you this:

Does that help?

I literally just needed to get rid of the two extraneous containers, that seems to have done the trick. Thank you so much for your help, I really appreciate it!