Two backgrounds with overlapping slider/carousel and navigation with Bootstrap

Question

Basically, I'm trying to get my nav/slider combo to overlap on two different color backgrounds where you can resize the browser width and it displays correctly. You can view the current site/code here: http://bobbyomari.com/opa

Here is a jsfiddle of the isolated nav.

There are a few issues I have:

1. When the nav collapse button appears and you click on it, the slider drops down below the nav menu. I just want that dropdown nav toggle to overlap on the slider, not push the slider down.

2. The body/wrapper below (main content) is using a margin-top, but when resizing the browser, it just makes a lot of space between the slider and the wrapper. Not sure how to resolve this.

3. When resizing the browser, the blue background does not adjust to the slider (or maybe it has to be the other way around?). Basically, I want the blue background to always end at HALF the height of the main slider.

       <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>
   

   Test

           <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;
}

Thanks in advance for your help.

Answer 1

• 1) I have tried a lot of options and sadly you will need to go into the bootstrap css file and find some classes. The div.navbar-collapse or ul.navbar-nav need to be position: absolute; with a z-index to overlap the other content. The problem is the bootstrap css/js files are overwriting any changes I make and seem to have a problem displaying it with position absolute.

• 2) In your media queries, for .wrapper, change the margin frommargin-top: 250px; to margin-top: 140px;, this will allow the space to be a lot less drastic.

• 3) In your media queries, for .header, you need to change the max-height: 320px; to max-height: 270px; or how ever much you think it needs to be in the middle.