引导程序：导航栏折叠时品牌重叠其他对象

时间：2019-08-15 11:39:35

标签： html css bootstrap-4

当导航栏折叠到汉堡菜单中时，品牌与导航链接重叠-如何分隔它们以避免这种情况发生？理想情况下，我希望品牌出现在顶部。

导航栏结构正确且未折叠时可以按预期工作，所有项目均正确放置，仅在菜单折叠时才会出现此问题。

JSFiddle：https://jsfiddle.net/PeterLawson/Lkv8gj9a/2/

HTML：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <!---Style Sheets-->
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <!---Website Title-->
  <title>Notepad</title>
</head>

<body>
  <!---Main Content-->
  <!---Navigation Bar-->
  <nav class="navbar nav-fill navbar-expand-lg navbar-light bg-light ">
    <div class="container">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarMenu">
        <!---Search Bar-->
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
        <!---Notepad Branding-->
        <ul class="nav navbar-nav navbar-center">
          <li><a class="navbar-brand" href="#"><img src="images\notepad-logo2.png" alt="Notepad Logo"
                style="width:150px;"></a></li>
        </ul>
        <!---Navigation Links-->
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Discover Notepads</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarProductDropdown" role="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              Catalogue
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarProductDropdown">
              <a class="dropdown-item" href="#">Furniture</a>
              <a class="dropdown-item" href="#">Lighting</a>
              <a class="dropdown-item" href="#">Decor</a>
            </div>
          </li>
          <!---User Profile-->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarAvatarDropdown" role="button" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              <img src="images\man.png" class="avatar">
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarAvatarDropdown">
              <a class="dropdown-item" href="#">Profile</a>
              <a class="dropdown-item" href="#">My Notepads</a>
              <a class="dropdown-item" href="#">Create New Notepad</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Sign Out</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!---Bootstrap JavaScript and jQuery-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  <!---Firebase SDK-->
  <script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-app.js"></script>
</body>

</html>

CSS：

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

.navbar { 
    margin-left: 10px;
    margin-right: 10px;
}

.main-logo{
    width: 150px;
    height: 50px; 
}

.navbar-nav li a {
    line-height: 50px;
   }

.dropdown-menu > li > a { 
    height: 50px; 
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow:
      inset 0 0 0 2px rgba(255,255,255,0.6), 
      0 1px 1px rgba(0,0,0,0.1);
    background-color: transparent !important;
    z-index: 999;
  }

  .avatar img {
    border-radius: inherit;
    width: inherit;
    height: inherit;
    display: block;
    position: relative;
    z-index: 998;
  }

1 个答案:

答案 0 :(得分：0)

最简单的解决方案是将brandImage从导航中移除-这将帮助您实现所需的目标；您的styles.css文件未完全引用，因此我插入了其他徽标-根据您的徽标，您需要调整填充等。

下面的工作代码段：

.navbar-nav.navbar-center {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
}

.navbar {
  margin-left: 10px;
  margin-right: 10px;
}

.main-logo {
  width: 150px;
  height: 50px;
}

.navbar-nav li a {
  line-height: 50px;
}

.dropdown-menu>li>a {
  height: 50px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6), 0 1px 1px rgba(0, 0, 0, 0.1);
  background-color: transparent !important;
  z-index: 999;
}

.avatar img {
  border-radius: inherit;
  width: inherit;
  height: inherit;
  display: block;
  position: relative;
  z-index: 998;
}

.navBarBrand {
  list-style: none;
  position: absolute;
  left: calc(50% - 21px);
  padding: 0;
  z-index: 1;
}

@media screen AND (min-width:991px) {
  .navBarBrand {
    padding: 12px 0px;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<!---Website Title-->

<!---Main Content-->
<ul class="navBarBrand">
  <li>
    <a class="=" href="#"><img src="https://www.akberiqbal.com/apple-touch-icon-57x57.png" alt="Notepad Logo"></a>
  </li>
</ul>
<!---Navigation Bar-->
<nav class="navbar nav-fill navbar-expand-lg navbar-light bg-light ">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarMenu">
      <!---Search Bar-->
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
      <!---Notepad Branding-->

      <!---Navigation Links-->
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Discover Notepads</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarProductDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Catalogue
            </a>
          <div class="dropdown-menu" aria-labelledby="navbarProductDropdown">
            <a class="dropdown-item" href="#">Furniture</a>
            <a class="dropdown-item" href="#">Lighting</a>
            <a class="dropdown-item" href="#">Decor</a>
          </div>
        </li>
        <!---User Profile-->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarAvatarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img src="images\man.png" class="avatar">
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarAvatarDropdown">
            <a class="dropdown-item" href="#">Profile</a>
            <a class="dropdown-item" href="#">My Notepads</a>
            <a class="dropdown-item" href="#">Create New Notepad</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Sign Out</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!---Bootstrap JavaScript and jQuery-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!---Firebase SDK-->
<script src="https://www.gstatic.com/firebasejs/6.3.5/firebase-app.js"></script>

相关问题
最新问题