Question

我是Angular / Bootstrap开发的新手，目前正在为慈善机构开发网站;

虽然我的Navbar在大型（笔记本电脑/ PC）显示器上运行良好，但在通过移动设备（小屏幕）观看时，您悬停在上面的任何菜单项都会变得透明。

我知道它显然是一个CSS属性，我假设它的悬停属性，但我不知道如何在我的自定义CSS中表达它。

这是一个屏幕截图，用于显示我的意思

我使用以下CSS代码来帮助格式化我的Navbar ..

.navbar-xs { min-height:65px; height: 65px; background-color: #ffffff; border: 0;}
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 20px;line-height: 35px; background-color: #ffffff;}
.navbar-xs .navbar-nav > li > a {  padding-top: 15px; padding-bottom: 5px; line-height: 28px; color: #000fb5; background-color: #ffffff; }
body {
    padding-top: 65px;
}

这里是导航栏HTML的一个小样本（它是一个大菜单，所以我只包含一个样本）

<nav class="navbar navbar-xs navbar-default navbar-fixed-top" role="navigation">
              <div class="container">
        <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
           <a href="#/" class="pull-left"><img src="images/logo.png"></a>
         </div>
         <div id="navbar" class="navbar-collapse collapse">
           <ul class="nav navbar-nav navbar-right">

             <!-- Home Menu -->
             <li class="dropdown">
               <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><b>Home </b><span class="caret"></span></a>
               <ul class="dropdown-menu multi-level">
                 <li class="dropdown-submenu">
                   <a href="" class="dropdown-toggle" data-toggle="dropdown">About Us</a>
                   <ul class="dropdown-menu">
                      <li><a href="#who">Who We Are</a></li>
                      <li><a href="#what">What We Do</a></li>
                      <li><a href="#why">Why We Do It</a></li>
                      <li><a href="#history">Our History</a></li>
                    </ul>
                  </li>
                 <li><a href="#news">Latest News</a></li>
                 <li><a href="#events">Coming Events</a></li>
                 <li><a href="#calendar">Calendar</a></li>
                 <li><a href="#ceo">CEO Message</a></li>
                 <li><a href="#bibleRead">Bible Reading</a></li>
                 <li><a href="#pray">Pray For Us</a></li>
               </ul>
             </li>

否则，现在可以在这里查看该网站; Current Website

否则，我的源代码可以在我的GitHub上查看; GitHub source

如果有人对如何改进网站有任何建议，我欢迎反馈 - 因为慈善机构不会向我提供任何反馈。

Answer 1

您需要将bgcolor添加到您的下拉导航

添加以下代码，这应该可行

@media (max-width: 767px){
  .navbar-nav .open .dropdown-menu {
        background-color: #e7e7e7!important;
  }
  .container>.navbar-collapse {
        background-color: #fff!important;
  }
}

Answer 2

您在文件中添加css此代码添加

.navbar .navbar-collapse.collapse.in {
 overflow: visible;
 }

Navbar移动显示错误

2 个答案: