title: How to fix the overflow hidden for bootstrap dropdown menu?
body: <p>I am working on a project and it has a navbar. I'm using bootstrap library for styling my navbar, to make it more beautiful I added frosted glass effect. But after adding that effect to my navbar, due to <code>overflow:hidden</code> rule in my css file all the drop-downs are now half hidden. <code>overflow:hidden</code> is required as without this property that glass effect in not very good. Is there any way to keep both overflow property and make those drop-downs working perfectly as they were before adding this effect ?</p>
  
  <p>html&amp;css:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
      
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"&gt;
  
  
  
  &lt;nav class="navbar navbar-expand-sm navbar-dark"&gt;
    &lt;a class="navbar-brand text-white"&gt;
           &lt;img src="new.svg"width="60" height="60" class="rounded-circle"&gt; BRAND
        &lt;/a&gt;
  
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportContent"&gt;
           &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;/button&gt;
  
    &lt;div class="collapse navbar-collapse" id="navbarSupportContent"&gt;
      &lt;ul class="navbar-nav ml-auto"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link signOutButton" href="#"&gt;&lt;i class="fa fa-sign-out"&gt;&lt;/i&gt; Sign Out&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item login dropdown"&gt;
          &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"&gt;&lt;i class="fa fa-sign-in"&gt;&lt;/i&gt; Log In&lt;/a&gt;
          &lt;div class="dropdown-menu dropdown-menu-right text-center" aria-labelledby="navbarDropdown"&gt;
            &lt;a class="dropdown-item googleButton"&gt;1&lt;/a&gt;
            &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
            &lt;a class="dropdown-item emailButton disabled" disabled&gt;2&lt;/a&gt;
  
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class="nav-item settings dropdown"&gt;
          &lt;a class="nav-link dropdown-toggle" href="#" id="settingsDropdown" role="button" data-toggle="dropdown"&gt;&lt;i class="fa fa-cog"&gt;&lt;/i&gt; Settings&lt;/a&gt;
          &lt;div class="dropdown-menu dropdown-menu-right text-center" aria-labelledby="settingsDropdown"&gt;
            &lt;a class="dropdown-item text-danger deleteAccount"&gt;1&lt;/a&gt;
            &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
            &lt;a class="dropdown-item text-primary info"&gt;2&lt;/a&gt;
            &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
            &lt;a class="dropdown-item text-primary addUrl"&gt;3&lt;/a&gt;
            &lt;div class="dropdown-divider beforechangePass"&gt;&lt;/div&gt;
            &lt;a class="dropdown-item text-primary changePass"&gt;4&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;!-- for making scrollable --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the <a href="https://jsfiddle.net/splintercell9/3rod6eua/13/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p><strong>EDIT:</strong> I wanted a solution that works on every devices whether it's small or big. Also some of the below answers are not good if your website is very large. At the time scrolling it breaks functionality of navbar somehow. I want to achieve this css effect without altering the main functionality of the Navbar across various devices.</p>