Question

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

以下是nav的{{3}}。

我有几个问题：

当出现导航折叠按钮并单击它时，滑块会下拉到导航菜单下方。我只想让下拉导航切换到滑块重叠，而不是按下滑块。
下面的主体/包装器（主要内容）使用的是margin-top，但是在调整浏览器大小时，它只会在滑块和包装器之间留出很大的空间。不知道如何解决这个问题。

调整浏览器大小时，蓝色背景不会调整为滑块（或者可能是相反的方式？）。基本上，我希望蓝色背景始终以HALF结束主滑块的高度。

    <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）我尝试了很多选项，遗憾的是你需要进入bootstrap css文件并找到一些类。 div.navbar-collapse或ul.navbar-nav需要position: absolute;，z-index与其他内容重叠。问题是bootstrap css / js文件正在覆盖我所做的任何更改，并且似乎在使用绝对位置显示它时出现问题。
2）在您的媒体查询中，对于.wrapper，将保证金从margin-top: 250px;更改为margin-top: 140px;，这将使空间不那么激烈。
3）在媒体查询中，对于.header，您需要将max-height: 320px;更改为max-height: 270px;或者您认为需要将其置于中间位置。

两个背景与重叠滑块/旋转木马和导航与Bootstrap

测试

1 个答案: