Closed firesightstudios closed 3 months ago
This does not seem to be a bug actually. Refer to this
I believe that something like this should solve your problem:
.customNavbar-mobile {
background-color: #282d43cc !important;
}
.customNavbar-mobile .offcanvas-backdrop {
backdrop-filter: blur(5px);
}
This does not seem to be a bug actually. Refer to this
I believe that something like this should solve your problem:
.customNavbar-mobile { background-color: #282d43cc !important; } .customNavbar-mobile .offcanvas-backdrop { backdrop-filter: blur(5px); }
Thanks for the reply, but for some reason when you do that the transparency with the blur changes
.customNavbar-mobile {
background-color: #282d43cc !important;
backdrop-filter: blur(20px);
}
Produces:
.customNavbar-mobile {
background-color: #282d43cc !important;
}
.customNavbar-mobile .offcanvas-backdrop {
backdrop-filter: blur(20px);
}
Produces:
^^ Your method partially works but the blur is ignored no matter the amount you apply to it.
So it looks like adding height: 100vh;
to the .offcanvas
fixes the issue. height: 100%;
does not work.
My final code that works:
.offcanvas {
height: 100vh;
}
.customNavbar-mobile {
backdrop-filter: blur(20px);
}
Working Codepen with changes
https://codepen.io/Justin-Zimmerman/pen/jOoxOVw
not sure if this is a bug ill let someone else decide if this should be closed.
Prerequisites
Describe the issue
Create a Navbar With offCanvas element & add custom class
<nav class="navbar fixed-top customNavbar-mobile">
Add css to custom class
.customNavbar-mobile { background-color: #282d43cc !important; backdrop-filter: blur(5px); }
Offcanvas breaks.
Reduced test cases
https://codepen.io/Justin-Zimmerman/pen/WNBzLBB
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Firefox
What version of Bootstrap are you using?
5.3.3