title: Move Nav Menu to overlay on top of the Slider - CSS
body: <p>I am working on this site: <a href="http://jillianssf.com/dev/" rel="nofollow noreferrer">http://jillianssf.com/dev/</a></p>
  
  <p>I am trying to get the nav menu to appear above the slider like here:<a href="https://i.stack.imgur.com/dghDt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dghDt.jpg" alt="enter image description here"></a></p>
  
  <p>The problem is that I can't get it to move up. I have tried adding the following CSS:</p>
  
  <pre><code>header { margin-top: -60px;}
  and/or
  .nav-main  { margin-top: -60px;}
  </code></pre>
  
  <p>to the site but it doesn't raise it up. I think it is because right above the nav menu HTML is a <code>clear:both</code> div.</p>
  
  <p>Top of page HTML:</p>
  
  <pre><code>&lt;div style="margin: 0 auto; max-width: 1920px;" class="ss2-align"&gt;&lt;script type="text/javascript"&gt;
      window['nextend-smart-slider-1-onresize'] = [];
  &lt;/script&gt;
  
  &lt;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"&gt;
   &lt;!-- SLIDER CODE IS HERE --&gt;
   &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      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"});
      });
  &lt;/script&gt;
  &lt;div style="clear: both;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div style="clear:both;"&gt;&lt;/div&gt;
  &lt;header&gt;
      &lt;div id="nav-main" class="nav-main " style="border-bottom: 2px solid rgb(237, 237, 237);"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-12 main-nav"&gt;            
                      &lt;nav class="site-navigation left" id="site-navigation"&gt;
                          &lt;ul class="nav-menu clearfix" id="menu-primary"&gt;
                              &lt;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;"&gt;&lt;a href="http://jillianssf.com/dev/" hidefocus="true" style="outline: medium none;"&gt;Home&lt;/a&gt;&lt;/li&gt;
                              &lt;!-- MENU ITEMS ARE HERE --&gt;
                              &lt;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;"&gt;&lt;a href="http://jillianssf.com/dev/blog/" hidefocus="true" style="outline: medium none;"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/nav&gt;      
                  &lt;/div&gt;              
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>Please let me know if you can help me with this code.</p>