Перемещение Nav меню для наложения на верхней части слайдера - CSS

Question

Я работаю на этом сайте: http://jillianssf.com/dev/

Я пытаюсь получить меню нав появляться над ползунком, как здесь:

Проблемы что я не могу заставить его двигаться вверх. Я попытался добавить следующий CSS:

header { margin-top: -60px;} 
and/or 
.nav-main { margin-top: -60px;} 

на сайт, но он не поднимает его. Я думаю, это потому, что над навигационным меню HTML находится clear:both div.

Верх страницы HTML:

<div style="margin: 0 auto; max-width: 1920px;" class="ss2-align"><script type="text/javascript"> 
    window['nextend-smart-slider-1-onresize'] = []; 
</script> 

<div data-phonefontsize="20" data-tabletfontsize="16" data-desktopfontsize="12" data-allfontsize="12" style="font-size: 8.7px; transform: translate3d(0px, 0px, 0px) perspective(1000px); margin: 0px; width: 1392px; height: 674px;" class="nextend-slider-fadeload nextend-desktop nextend-loaded" id="nextend-smart-slider-1"> 
<!-- SLIDER CODE IS HERE --> 
</div> 

<script type="text/javascript"> 
    njQuery(document).ready(function() { 
     njQuery('#nextend-smart-slider-1').smartslider({"translate3d":1,"playfirstlayer":0,"mainafterout":1,"inaftermain":1,"fadeonscroll":0,"autoplay":1,"autoplayConfig":{"duration":8000,"counter":0,"autoplayToSlide":0,"stopautoplay":{"click":1,"mouseenter":1,"slideplaying":1},"resumeautoplay":{"mouseleave":0,"slideplayed":1,"slidechanged":0}},"responsive":{"downscale":1,"upscale":0,"maxwidth":3000,"basedon":"combined","screenwidth":{"tablet":1024,"phone":640},"ratios":[1,1,0.7,0.5]},"controls":{"scroll":0,"touch":"0","keyboard":0},"blockrightclick":0,"lazyload":0,"lazyloadneighbor":0,"randomize":0,"type":"ssSimpleSlider","animation":["horizontal"],"animationSettings":{"duration":1500,"delay":0,"easing":"easeInOutQuint","parallax":1},"flux":[0,["bars"]],"touchanimation":"0"}); 
    }); 
</script> 
<div style="clear: both;"></div> 
</div> 

<div style="clear:both;"></div> 
<header> 
    <div id="nav-main" class="nav-main " style="border-bottom: 2px solid rgb(237, 237, 237);"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-xs-12 main-nav">    
        <nav class="site-navigation left" id="site-navigation"> 
         <ul class="nav-menu clearfix" id="menu-primary"> 
          <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-642 current_page_item menu-item-951" id="menu-item-951" style="padding-top: 9px; padding-bottom: 9px;"><a href="http://jillianssf.com/dev/" hidefocus="true" style="outline: medium none;">Home</a></li> 
          <!-- MENU ITEMS ARE HERE --> 
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-969" id="menu-item-969" style="padding-top: 9px; padding-bottom: 9px;"><a href="http://jillianssf.com/dev/blog/" hidefocus="true" style="outline: medium none;">Blog</a></li> 
         </ul> 
        </nav>  
       </div>    
      </div> 
     </div> 
    </div> 
</header> 

Пожалуйста, дайте мне знать, если вы можете помочь мне с этим кодом.

Answer 1

Попробуйте добавить bottom: 81px; на .container div.

CSS

.nav-main .container { 
    background-color: rgba(0, 0, 0, 0.6) !important; 
    position: relative; 
    bottom: 81px; /* add here */ 
    padding: 10px 0px 0px; 
} 

Это, кажется, работает на Firefox и Chrome (я попытался с помощью DevTools). Хотя белая маска (треугольные веточки) поверх навигационной панели будет показывать.