移动设备上的引导导航栏显示在其他所有内容的后面

Posted 2023-05-08

技术标签:

【中文标题】移动设备上的引导导航栏显示在其他所有内容的后面【英文标题】：Bootstrap Navbar on mobile shows up behind everything else 【发布时间】：2021-10-17 16:40:03 【问题描述】：

一直在使用引导程序来设置我的标题内容的样式，但最近遇到了一些奇怪的事情。点击汉堡菜单后切换的导航栏显示在所有组件的后面。 z-index 已达到最大值，但它不起作用。这是我的 HTML：

<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">

  <a href="% url 'index' %"><img src="% static 'assets/img/logo-hi-res.png' %"  class="ActLogo img-fluid"></a>
  <h1 class="logo me-auto"><a href="% url 'index' %"><span>My</span>Website.</a></h1>

  <nav id="navbar" class="navbar order-last order-lg-0">
    <ul>
      <li><a href="% url 'index' %" class="% if nbar == 'index' %active% endif %">Home</a></li>

      <li><a href="% url 'about' %" class="% if nbar == 'about' %active% endif %"><span>About</span></a>

      <li class="dropdown"><a href="% url '#' %" class="% if nbar == 'services' %active% endif %"><span>Services</span><i class="bi bi-chevron-down"></i></a>
        <ul>
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
          <li><a href="#">Item 4</a></li>
          <li><a href="#">Item 5</a></li>
          <li><a href="#">Item 6</a></li>
        </ul>
      </li>

      <li><a href="#" class="% if nbar == '#' %active% endif %">Pricing</a></li>
      
      <li><a href="#" class="% if nbar == '#' %active% endif %">Contact</a></li>
      
      <button class="clientBt btn btn-sm btn-primary mr-2"><a href="#">CLIENT LOGIN</a></button>

    </ul>
    <i class="bi bi-list mobile-nav-toggle"></i>
  </nav>

  <div class="header-social-links d-flex">
    <a href="#" class="twitter" target="_blank"><i class="bu bi-twitter"></i></a>
    <a href="#" class="facebook" target="_blank"><i class="bu bi-facebook"></i></a>
    <a href="#" class="instagram" target="_blank"><i class="bu bi-instagram"></i></a>
    <a href="#" class="linkedin" target="_blank"><i class="bu bi-linkedin"></i></i></a>
  </div>
</div>

还有CSS：

#header 
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: grayscale(0) contrast(3) blur(5px);
  transition: all 0.5s;
  z-index: 997;
  padding: 15px 0;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);





#header .logo 
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  



#header .logo a 
  color: #d40b00;


#header .logo a span 
  color: #2C3380;


#header .ActLogo 
  width: 60px;
  height:  60px;
  margin-top: -24px;
  margin-bottom: -20px;
  margin-right: 10px;


/* Social Links */
.header-social-links 
  margin-left: 20px;
  border-left: 1px solid #c4c4c4;


.header-social-links a 
  color: #a0a0a0;
  display: inline-block;
  line-height: 0px;
  transition: 0.3s;
  padding-left: 20px;


.header-social-links a i 
  line-height: 0;


.header-social-links a:hover 
  color: #e85a5d;


@media (max-width: 480px) 
  .header-social-links 
    padding: 0 15px 0 0;
    border-left: 0;
  

  #header a .ActLogo 
    display: none;
    width: 40px;
    height: 40px;
  
  #header .logo a 
    color: #E64238;
  
  
  #header .logo a span 
    color: #2C3380;
  



@media (max-width: 1200px) 
  #header a .ActLogo 
    display: none;
  



@media (max-width: 1200px) 
  .header-social-links 
    padding: 0 15px 0 0;
    border-left: 0;
  
  #header .logo 
    font-size: 23px;
  
  #header a .ActLogo
    margin-top: -10px;
    margin-bottom: -10px;
  


/* Nav Menu */

/* Desktop */
.navbar 
  padding: 0;
  


.navbar ul 
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;


.navbar li 
  position: relative;


.navbar a, .navbar a:focus 
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  text-transform: uppercase;
  transition: 0.3s;


.navbar a i, .navbar a:focus i 
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;


.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a 
  color: #565b99;


.navbar .dropdown ul 
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-top: 2px solid #373F94;


.navbar .dropdown ul li 
  min-width: 200px;


.navbar .dropdown ul a 
  padding: 10px 10px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: #111;


.navbar .dropdown ul a i 
  font-size: 12px;


.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a 
  color: #373F94;


.navbar .dropdown:hover > ul 
  opacity: 1;
  top: 100%;
  visibility: visible;


.navbar .dropdown .dropdown ul 
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;


.navbar .dropdown .dropdown:hover > ul 
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;


@media (max-width: 1366px) 
  .navbar .dropdown .dropdown ul 
    left: -90%;
  
  .navbar .dropdown .dropdown:hover > ul 
    left: -100%;
  


.clientBt
  color: white;
  background-color: #2C3380;
  border: none;
  padding: 0px;
  margin-left: 30px;
  border-radius: 8px;


.clientBt:hover
  background-color: #4b56ce;

.clientBt a
  color: white;
  padding: 10px;

.clientBt a:hover
  color: white;


/*Mobile Navigation*/

.mobile-nav-toggle 
  color: #111;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;


.mobile-nav-toggle.bi-x 
  color: #fff;


/* SWITCH TO MOBILE HEADER */
@media (max-width: 1200px) 
  .mobile-nav-toggle 
    display: block;
  
  .navbar ul 
    display: none;
  



.navbar-mobile 
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  transition: 0.3s;
  z-index: 999;
  height: auto;


.navbar-mobile .mobile-nav-toggle 
  position: absolute;
  top: 15px;
  right: 15px;


.navbar-mobile ul 
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
  z-index: 9999;


.navbar-mobile a 
  padding: 10px 20px;
  font-size: 15px;
  color: #111;


.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a 
  color: #2C3380;


.navbar-mobile .getstarted 
  margin: 15px;


.navbar-mobile .dropdown ul 
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 999;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);


.navbar-mobile .dropdown ul li 
  min-width: 200px;


.navbar-mobile .dropdown ul a 
  padding: 10px 20px;


.navbar-mobile .dropdown ul a i 
  font-size: 12px;


.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a 
  color: #2C3380;


.navbar-mobile .dropdown > .dropdown-active 
  display: block;

还有脚本：

  // Mobile nav toggle
  on('click', '.mobile-nav-toggle', function(e) 
    select('#navbar').classList.toggle('navbar-mobile')
    this.classList.toggle('bi-list')
    this.classList.toggle('bi-x')
  )

  // Mobile nav activate dropdown 
  on('click', '.navbar .dropdown > a', function(e) 
    if (select('#navbar').classList.contains('navbar-mobile')) 
      e.preventDefault()
      this.nextElementSibling.classList.toggle('dropdown-active')
    
  , true)

如果您想查看实际的错误，请前往here，查看移动视图并尝试从汉堡包中切换菜单。

【问题讨论】：

所有的 z-indexes 几乎都已经用尽了。 .navbar .ul 有 99。增加到 999。没用。等我看看 【参考方案1】：

不得不做一些调整，其实根本不是z-index的问题。

nav

overflow-hidden

ul

min-height: fit-content;

这 2 项更改应该可以使其按您的预期工作。

【讨论】：

以上是关于移动设备上的引导导航栏显示在其他所有内容的后面的主要内容，如果未能解决你的问题，请参考以下文章

向移动视图上的引导导航栏切换按钮添加文本提示