Question

我正在一个项目上，它有一个导航栏。我正在使用引导程序库来设置导航栏的样式，为了使其更美观，我添加了毛玻璃效果。但是，在将这种效果添加到导航栏后，由于css文件中的overflow:hidden规则，所有下拉菜单现在都被隐藏了一半。 overflow:hidden是必需的，因为没有此属性，玻璃效果不是很好。有什么办法可以保持两个溢出属性并使这些下拉菜单像添加此效果之前一样正常工作？

html＆css：

body {
  background-image: url('https://i.imgur.com/IUWnlGU.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">



<nav class="navbar navbar-expand-sm navbar-dark">
  <a class="navbar-brand text-white">
         <img src="new.svg"width="60" height="60" class="rounded-circle"> BRAND
      </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportContent">
         <span class="navbar-toggler-icon"></span>
      </button>

  <div class="collapse navbar-collapse" id="navbarSupportContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link signOutButton" href="#"><i class="fa fa-sign-out"></i> Sign Out</a>
      </li>
      <li class="nav-item login dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"><i class="fa fa-sign-in"></i> Log In</a>
        <div class="dropdown-menu dropdown-menu-right text-center" aria-labelledby="navbarDropdown">
          <a class="dropdown-item googleButton">1</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item emailButton disabled" disabled>2</a>

        </div>
      </li>
      <li class="nav-item settings dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="settingsDropdown" role="button" data-toggle="dropdown"><i class="fa fa-cog"></i> Settings</a>
        <div class="dropdown-menu dropdown-menu-right text-center" aria-labelledby="settingsDropdown">
          <a class="dropdown-item text-danger deleteAccount">1</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item text-primary info">2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item text-primary addUrl">3</a>
          <div class="dropdown-divider beforechangePass"></div>
          <a class="dropdown-item text-primary changePass">4</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

<br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><!-- for making scrollable -->

这里是fiddle

编辑：我想要一个适用于所有设备的解决方案，无论大小。如果您的网站很大，下面的一些答案也不是很好。在滚动时，它以某种方式破坏了导航栏的功能。我想在不更改各种设备的Navbar主要功能的情况下实现CSS效果。

Answer 1

编辑：根据要求，这应该起作用：

@media only screen and (min-width: 600px) {
    ul{
      position:fixed !important;
      right: 0;
      left: auto;
    }
}

这将使ul的孩子不被裁剪。因此，overflow:hidden将不会应用于它们。另外，这会将您的元素向右对齐。

<nav class="navbar navbar-expand-sm navbar-dark navbar-fixed fixed-top">

这会将您的导航栏固定在顶部。

Answer 2

还有另一种解决问题的方法，您可以删除导航上的over-flow:hidden;，还可以将nav::before的高度指定为110px，然后可以使用此{{1 }}代码以清除模糊效果的边界

nav::after

如何修复引导程序下拉菜单隐藏的溢出？

2 个答案: