jquery - 折叠时 Bootstrap Navbar 颜色故障-6ren

jquery - 折叠时 Bootstrap Navbar 颜色故障

转载作者：行者123 更新时间：2023-11-28 02:12:35

我有一个问题:当我调整视口(viewport)大小时，背景颜色消失了。我尝试了一切，但我无法修复它。我正在使用与 Wordpress 的 Bootstrap 集成。链接到下图...在折叠时的 Bootstrap 菜单模板中应该有 bg 颜色，但在我的情况下没有...

That is the navbar

那是css样式:

      .navLogo {
      width: 15%;
       height: 100%;
     }

.navbar{
height: 10vh;
}

.navbar-dark {
background-color: rgba(0, 0, 0, 0.5);
}

.navbar-dark .navbar-brand {
 color: #000000;
 }

 .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
  color: #000000;
  }

.navbar-dark .navbar-nav .nav-link {
  color: #000000;
  padding-top:3vh;
   height:10vh;
 -webkit-transition: background-color 0.5s ease-out;
   -moz-transition: background-color 0.5s ease-out;
  -o-transition: background-color 0.5s ease-out;
   transition: background-color 0.5s ease-out;
    }
                                                                       .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {     
  color: #FFFFFF!important;
    background-color: rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid #FF8401;
     }


.navbar-dark .navbar-nav .nav-link.disabled {
  color: #000000;
     }

.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
  color: #000000;
   background-color: rgba(0, 0, 0, 0.5);
  border-bottom: 2px solid #FF8401;
   }

 .navbar-dark .navbar-toggler {
   color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .navbar-dark .navbar-toggler-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0   0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255,  255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10'  d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
 }

   .navbar-dark .navbar-text {
     color: #000000;
   }

   .navbar-dark .navbar-text a {
     color: #000000;
  }

   .navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
     color: #000000;

And this is in the header.php:
`<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- ******************* The Navbar Area ******************* -->
    <div id="wrapper">
        <div id="header">   
          <nav id="mainNav" class="navbar navbar-expand-md navbar-dark fixed-top">
        <?php if ( 'container' == $container ) : ?>
        <div class="container">
       <?php endif; ?>
                                                                                               <img class="navLogo" src="http://www.mastertraf.net/wp-content/uploads/2018/01/LOGO_1.jpg" alt=""></a>

                                                                                                            <button class="navbar-toggler" type="button" data-toggle="collapse"          data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-    expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-      icon"></span>
  </button>



      <!-- The WordPress Menu goes here -->
                <?php wp_nav_menu(
                        array(
                      'theme_location'  => '',
                       'container_class' => 'collapse navbar-collapse',
                       'container_id'    => 'navbarNavDropdown',
                            'menu_class'      => 'navbar-nav ml-auto',
                        'fallback_cb'     => '',
                         'menu_id'         => 'main-menu',
                       'walker'          => new WP_Bootstrap_Navwalker(),
                     )
                 ); ?>

      </div>
           </nav>

最佳答案

.navbar div 应该随着下拉菜单扩展它的高度。你的 .navbar 样式为 { height: 10vh; } 可能是问题所在。删除那些并查看是否应用了背景颜色。

关于jquery - 折叠时 Bootstrap Navbar 颜色故障，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48667746/

文章推荐： html - CSS 动画在 Edge 中不起作用

文章推荐： javascript - 获取真实大小的 Canvas 的问题

文章推荐： html - CSS @font-face 无法正常工作(第 2 期)

首页

博学

6Ren·AI

商城

jquery - 折叠时 Bootstrap Navbar 颜色故障