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

Any help is appreciated.
15 Replies
Asmodeus
Asmodeus14mo 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...
Asmodeus
Asmodeus14mo ago
No description
Asmodeus
Asmodeus14mo ago
No description
Asmodeus
Asmodeus14mo 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
J a minute
Asmodeus
Asmodeus14mo 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
Lemme see When you add blur in one element, the another one no longer works?
Asmodeus
Asmodeus14mo 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
You see. Try to think a bit about how your javascript code works
Asmodeus
Asmodeus14mo ago
Even manually editing the styles to check if its just classes colliding
Pi, a future fluent jp speaker
Step by step
Asmodeus
Asmodeus14mo 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
Another thing There is the .scrolled-show class, but it is not specified neither in the html nor the js
Asmodeus
Asmodeus14mo 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
there is more code in that isnt there
Want results from more Discord servers?
Add your server