具有重叠滑块/轮播和 Bootstrap 导航的两个背景

Question

基本上，我试图让我的导航/滑块​​组合在两种不同颜色的背景上重叠，​​您可以在其中调整浏览器宽度并正确显示。您可以在此处查看当前站点/代码：http://bobbyomari.com/opa

这是孤立的nav 的jsfiddle。

我有几个问题：

1. 当出现导航折叠按钮并单击它时，滑块会下拉到导航菜单下方。我只希望下拉导航切换在滑块上重叠，而不是向下推滑块。

2. 下面的主体/包装器（主要内容）使用了顶部边距，但在调整浏览器大小时，它只会在滑块和包装器之间留出很多空间。不知道如何解决。

3. 在调整浏览器大小时，蓝色背景不会调整到滑块（或者可能必须相反？）。基本上，我希望蓝色背景始终以主滑块高度的一半结束。

       <div class="header header-margin-top">
   <div class="container">
   
   <div class="row">
   <div class="col-md-12">
   <div class="header-spacing">
   
       <div class="pull-left">
       <h1 class="logo"> Logo Goes Here</h1>
       </div>
   
       <div class="pull-right">
   
       <!-- Report an Absence -->
           <button type="button" class="btn report-an-absence">Report an Absence</button>
   
       <!-- Parent Portal -->  
           <div class="btn-group"> 
               <button type="button" class="btn parent-portal dropdown-toggle hidden-xs" data-toggle="dropdown">OPA Portal <span class="caret"></span></button>
               <ul class="dropdown-menu parent-dropdown pull-right parent-dropdown-text" role="menu">
                   <li><a href="#">Test</a></li>
               </ul>   
           </div>
       </div>
   </div>
   </div>
   </div>
   
       <nav class="navbar nav-default main-nav" role="navigation">
   
           <!-- Toggle -->
           <div class="navbar-header">
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-collapse">
                   <span class="sr-only">Toggle navigation</span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
               </button>
           </div>
   
           <!-- Nav Links -->  
           <div class="collapse navbar-collapse" id="main-nav-collapse">
               <ul class="nav navbar-nav">
                   <li class="active"><a href="#">Home</a></li>
                   <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
                       <ul class="dropdown-menu dropdown-nav">
                           <li><a href="#">Dropdown Item 1</a></li>
                           <li><a href="#">Dropdown Item 2</a></li>
                           <li><a href="#">Dropdown Item 3</a></li>
                           <li><a href="#">Dropdown Item 4</a></li>  
                       </ul>
                       </li>                                   
                   <li><a href="#">Multiple Intelligences</a></li>
                   <li><a href="#">Programs</a></li>
                   <li><a href="#">Admissions</a></li>
                   <li><a href="#">Honour Society</a></li>
                   <li><a chref="#">Contact</a></li>
               </ul>
   
               <div class="pull-right hidden-xs hidden-sm hidden-md">
               <form class="navbar-form navbar-left search-padding" role="search">
               <div class="form-group">
                   <input type="text" class="form-control search-nav" placeholder="Search...">
               </div>
                   <button type="submit" class="btn btn-default btn-search"><span class="glyphicon glyphicon-search"></span></button>
               </form> 
               </div>
           </div>
       </nav>
   

   测试

           <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">       <span class="glyphicon glyphicon-chevron-right"></span>
           </a>
       </div>
   </div>
   </div>
   

CSS...

body {
    background-color: #f2f2f2;
}

.header {
    width: 100%;
    background-color: #000;
    top: 100px;
    max-height: 320px;
    min-height: 100px;
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top, #03B3E7 0%, #008EB8 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #03B3E7 0%, #008EB8 100%);

    /* Opera */ 
    background-image: -o-linear-gradient(top, #03B3E7 0%, #008EB8 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #03B3E7), color-stop(1, #008EB8));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #03B3E7 0%, #008EB8 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom, #03B3E7 0%, #008EB8 100%);
}

.logo {
    color: #fff;
    margin-top: 10px;
}

.header-spacing {
    margin-top: 50px;
}

.main-nav {
    margin-top: 30px;
    background-color: #333;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: none;
    margin-bottom: 0px;
}

.nav-text {
    font-family: "Open Sans", sans-serif;
    font-weight: bold;
}

.nav-text:hover {
    color: #333;
    background-color: #4d4d4d;
}

.navbar .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-nav >li > a {
    font-weight: bold;
}

.navbar-nav > li > a:hover{
  background-color: #4d4d4d;
  color: #fff;
}

.dropdown-menu > li > a {
    color: #fff;
    line-height: 1.5em;
}

.dropdown-menu > li > a:hover {
    color: #fff;
    background-color: #4d4d4d;
}

.dropdown-nav {
    color: #fff;
    background-color: #333;
    border: none;
}

.nav .open > a,
.nav .open > a:hover {
    color: #fff;
    background-color: #4d4d4d;
}

.nav .open > a:focus {
    color: #fff;
    background-color: #333;
}

提前感谢您的帮助。

Answer 1

• 1) 我尝试了很多选项，遗憾的是您需要进入引导 css 文件并找到一些类。 div.navbar-collapse 或 ul.navbar-nav 必须是 position: absolute; 和 z-index 才能与其他内容重叠。问题是引导 css/js 文件正在覆盖我所做的任何更改，并且似乎在以绝对位置显示它时出现问题。

• 2) 在您的媒体查询中，对于.wrapper，将边距从margin-top: 250px; 更改为margin-top: 140px;，这将使空间不那么剧烈。

• 3) 在您的媒体查询中，对于.header，您需要将max-height: 320px; 更改为max-height: 270px;，或者您认为它需要在中间多少。

  李>