htmlcsswebflow

Menu works perfectly in Safari but not Chrome?

I am having trouble figuring out why my site menu shows up differently over browsers. Screenshots are below.

Safari Chrome

Site is here.

Update: Figured out what is causing it. It’s these lines of code in the head. Still unsure why it would mess up the menu in chrome but not safari.

<style>
.navigation { 
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
</style>
Solution

  • Just do this.

    .full-screen-menu {
  width: 100%;
  height: 100vh;
}

    Good luck Mr. McArthur!