将导航菜单移到滑块顶部-CSS

Question

I am working on this site: http://jillianssf.com/dev/

I am trying to get the nav menu to appear above the slider like here:

The problem is that I can't get it to move up. I have tried adding the following CSS:

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

to the site but it doesn't raise it up. I think it is because right above the nav menu HTML is a clear:both div.

Top of page 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>

Please let me know if you can help me with this code.

Answer 1

Try adding bottom: 81px; to the .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;
}

This seems to work on Firefox and Chrome (I tried using devtools). Though the white mask (triangle thingies) on top of the nav bar would show.