15 Replies
here is my js
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...
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.
J a minute
i tried to manually add the styles in the js because nothing was working. before i was just adding a class instead.
Lemme see
When you add blur in one element, the another one no longer works?
yep
that's insane
im not sure how
I don't see any colliding styles. I've tried many different things.
You see. Try to think a bit about how your javascript code works
Even manually editing the styles to check if its just classes colliding
Step by step
well this is how its supposed to work
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)
Another thing
There is the .scrolled-show class, but it is not specified neither in the html nor the js
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.there is more code in that isnt there