Question

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

这就是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>

Answer 1

.navbar div应该通过下拉列表扩展它的高度。你的.navbar样式{height：10vh;可能是问题。删除它们，看看是否应用了背景颜色。

崩溃时Bootstrap Navbar颜色故障

1 个答案: