I have been working diligently on a project that includes a navbar. Utilizing the Bootstrap library for styling, I enhanced my navbar with a frosted glass effect to elevate its visual appeal. However, upon adding this effect, I encountered an issue where the drop-down menus were only partially visible due to the overflow:hidden rule in my CSS file. This rule is essential for maintaining the quality of the glass effect, but it inadvertently impacted the functionality of the drop-downs. Is there a way to preserve the overflow property while ensuring the drop-down menus function flawlessly as they did prior to incorporating this effect?
HTML & CSS:
body {
background-image: url('https://i.imgur.com/0zi2FqA.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
nav {
background: inherit;
position: relative;
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
z-index: 1;
overflow: hidden;
}
nav::before {
content: "";
position: absolute;
background: inherit;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
filter: blur(10px);
margin: -10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
...
For more details and the working example, check out the fiddle
EDIT: Seeking a solution that caters to all devices, regardless of size. Some suggested fixes may not be suitable for larger websites as they can disrupt the Navbar's functionality during scrolling. The goal is to achieve the desired CSS effect without compromising the main functionality of the Navbar across various devices.