Can't blur two elements at once. No idea how this is working.

Any help is appreciated.

15 Replies

AsmodeusOP•15mo ago

---
import { Image } from "astro:assets";
import logoImage from "../assets/logo/logo-96x96.webp";

---
<div class="navbar" id="navbar">
    <a href="/" class="logo-container"><img src={logoImage.src} id="logo-image" width="80px" height="80px" alt="a magnifying glass looking at the planet" />World Coffee Information</a>
    <div class="navbar-toggler-hamburger" id="navbar-toggler-hamburger"></div>
    <div class="navbar-collapse" id="navbar-collapse">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">About</a></li>
        <li><a href="/coffeeID">Create a CoffeeID</a></li>
        <li><a href="/inputCoffeeID">Look up a CoffeeID</a></li>
        <li><a href="/">Sign in</a></li>
      </ul>
    </div>
  </div>
  
  

<style>
    a {
  color: white;
}
.logo-container {
  display: flex;
  align-items: center;
}

.logo-container img {
  margin-right: 10px;
}
#logo-image {
  padding-top: 0.5rem;
  padding-left: 1rem;
}
li {
        color: white;
        margin-right: 1.5rem;
        font-size: 1.3rem;
 }
    li:hover {
        transform: scale(1.1);
        transition: transform .2s;
 }
.navbar {
  top: 0;
  position: sticky;
  background-color: transparent;
  width: 100%;
  z-index: 1000;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-collapse {
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: max-height 0.4s ease-in-out;
  max-height: 500px;
  overflow: hidden;
  text-align: center;
}

.navbar-toggler-hamburger {
  display: none;
}
.navbar-collapse ul {
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.navbar.scrolled {
        backdrop-filter: blur(16px) saturate(100%);
        /* border-bottom: 1px solid rgba(0, 0, 0, .2); Not sure which one to use yet: this is original... */ 
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

@media (max-width: 1000px) {
  .navbar-toggler-hamburger {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    filter: drop-shadow(2px 2px 2px black);
    margin: 1rem;
  }

  .navbar-collapse {
    flex-direction: column;
    gap: 10px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 0;
  }
  .navbar-collapse.show {
    max-height: 500px;
    backdrop-filter: blur(16px) saturate(100%);
  }

  
  .navbar-collapse ul {
    flex-direction: column;
  }
}

</style>

---
import { Image } from "astro:assets";
import logoImage from "../assets/logo/logo-96x96.webp";

---
<div class="navbar" id="navbar">
    <a href="/" class="logo-container"><img src={logoImage.src} id="logo-image" width="80px" height="80px" alt="a magnifying glass looking at the planet" />World Coffee Information</a>
    <div class="navbar-toggler-hamburger" id="navbar-toggler-hamburger"></div>
    <div class="navbar-collapse" id="navbar-collapse">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">About</a></li>
        <li><a href="/coffeeID">Create a CoffeeID</a></li>
        <li><a href="/inputCoffeeID">Look up a CoffeeID</a></li>
        <li><a href="/">Sign in</a></li>
      </ul>
    </div>
  </div>
  
  

<style>
    a {
  color: white;
}
.logo-container {
  display: flex;
  align-items: center;
}

.logo-container img {
  margin-right: 10px;
}
#logo-image {
  padding-top: 0.5rem;
  padding-left: 1rem;
}
li {
        color: white;
        margin-right: 1.5rem;
        font-size: 1.3rem;
 }
    li:hover {
        transform: scale(1.1);
        transition: transform .2s;
 }
.navbar {
  top: 0;
  position: sticky;
  background-color: transparent;
  width: 100%;
  z-index: 1000;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-collapse {
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: max-height 0.4s ease-in-out;
  max-height: 500px;
  overflow: hidden;
  text-align: center;
}

.navbar-toggler-hamburger {
  display: none;
}
.navbar-collapse ul {
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.navbar.scrolled {
        backdrop-filter: blur(16px) saturate(100%);
        /* border-bottom: 1px solid rgba(0, 0, 0, .2); Not sure which one to use yet: this is original... */ 
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

@media (max-width: 1000px) {
  .navbar-toggler-hamburger {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    filter: drop-shadow(2px 2px 2px black);
    margin: 1rem;
  }

  .navbar-collapse {
    flex-direction: column;
    gap: 10px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 0;
  }
  .navbar-collapse.show {
    max-height: 500px;
    backdrop-filter: blur(16px) saturate(100%);
  }

  
  .navbar-collapse ul {
    flex-direction: column;
  }
}

</style>

here is my js

document.getElementById("navbar-toggler-hamburger").addEventListener("click", function() {
  const navbarCollapse = document.getElementById("navbar-collapse");
  const navbar = document.getElementById("navbar");

  if (navbarCollapse.classList.contains("show")) {
    navbarCollapse.classList.remove("show");
  } else {
    navbarCollapse.classList.add("show");
    navbar.classList.add("scrolled");
  }
});

document.getElementById("navbar-toggler-hamburger").addEventListener("click", function() {
  const navbarCollapse = document.getElementById("navbar-collapse");
  const navbar = document.getElementById("navbar");

  if (navbarCollapse.classList.contains("show")) {
    navbarCollapse.classList.remove("show");
  } else {
    navbarCollapse.classList.add("show");
    navbar.classList.add("scrolled");
  }
});

but this aside, even in the developer mode on my browser when I enabled a backdrop-filter on navbar the one on navbar-collapse no longer works...

AsmodeusOP•15mo ago

AsmodeusOP•15mo ago

it's either one or the other when i enable or disable the blur on navbar. is there some weird conflict im not seeing? I'm not changing classes here for my test... just enabled or disabling the blur on navbar.

Pi, a future fluent jp speaker•15mo ago

J a minute

AsmodeusOP•15mo ago

i tried to manually add the styles in the js because nothing was working. before i was just adding a class instead.

Pi, a future fluent jp speaker•15mo ago

Lemme see When you add blur in one element, the another one no longer works?

AsmodeusOP•15mo ago

yep that's insane im not sure how I don't see any colliding styles. I've tried many different things.

Pi, a future fluent jp speaker•15mo ago

You see. Try to think a bit about how your javascript code works

AsmodeusOP•15mo ago

Even manually editing the styles to check if its just classes colliding

Pi, a future fluent jp speaker•15mo ago

Step by step

AsmodeusOP•15mo ago

well this is how its supposed to work

document.getElementById("navbar-toggler-hamburger").addEventListener("click", function() {
  const navbarCollapse = document.getElementById("navbar-collapse");
  const navbar = document.getElementById("navbar");

  if (navbarCollapse.classList.contains("show")) {
    navbarCollapse.classList.remove("show");
  } else {
    navbarCollapse.classList.add("show");
    navbar.classList.add("scrolled");
  }
});

document.getElementById("navbar-toggler-hamburger").addEventListener("click", function() {
  const navbarCollapse = document.getElementById("navbar-collapse");
  const navbar = document.getElementById("navbar");

  if (navbarCollapse.classList.contains("show")) {
    navbarCollapse.classList.remove("show");
  } else {
    navbarCollapse.classList.add("show");
    navbar.classList.add("scrolled");
  }
});

if show is added, remove it.. if not... add it.. and add scrolled to the navbar which should add a blur to the navbar using .navbar.scrolled, and a blur to the navbarcollapse using .navbar-collapse.show and yet they can't exist at the same time somehow im not getting how that's working @pi3639 the thinking behind adding scrolled to the navbar when adding show is also because if you open the hamburger button the navbar should be blurred along with the new menu area (collapse)

Pi, a future fluent jp speaker•15mo ago

Another thing There is the .scrolled-show class, but it is not specified neither in the html nor the js

AsmodeusOP•15mo ago

yeah thats because i was testing things im using .navbar.scrolled there, i removed it from the example so you can confirm this is weird, right https://codepen.io/Coffee-Nerd/pen/xxmdPGb here is a codepen of the thing when you scroll down the navbar should blur, which it does... but also when you open the hamburger button (which is only displayed when your width is less than 1000) it is supposed to blur that zone as well. if you re UNSCROLLED and you open the hamburger button, the extended zone WILL blur, but if you ARE scrolled and you open it, the extended area will NOT blur. literally if i manually add backdrop-filter: blur(16px) saturate(100%); to the navbar in developer mode in my browser, and not even with the class "scrolled" it will undo the blur of the extended area.

Pi, a future fluent jp speaker•15mo ago

there is more code in that isnt there

Gaming

Programming

Can't blur two elements at once. No idea how this is working.