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

[Quiint (Quint Bailey)]

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)

[jmkriz]

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

[Quiint (Quint Bailey)]

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:

<style>

  .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);
  }
}

</style>

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

[jmkriz]

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:

And using this simplified code:

<style>
.nav-container{
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
</style>

Gets you this:

Does that help?

[Quiint (Quint Bailey)]

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!