title: Dropdown menu open under div
body: <p>I need help with this site: <a href="http://www.jsdkqwoj.eu/" rel="nofollow noreferrer">http://www.jsdkqwoj.eu/</a></p>
  
  <p>In mobile drop down menu goes under the div. Tried z-index:9999 for the header / topnav elements and z-index:-9999 to div. Not help. Also tried this <a href="https://stackoverflow.com/questions/19236923/dropdown-menu-hidden-under-div">Dropdown menu hidden under div</a> and it is not helping.</p>
  
  <p>I googled yesterday few hours and tried many things, and not helping. I also would like to get image top of the page under the header, but i am satisfied of the menu fix.</p>
  
  <p>I linked the page but here is code of the top nav/header and div.</p>
  
  <p><strong>Summary:</strong> I want menu open over the div and image shows behind the menu dropdown. I can do dropdown menu like pushing down the div, but that is not what i want. </p>
  
  <p><strong>CSS</strong> </p>
  
  <pre><code>header {
      background-color: rgba(0,0,0,0.7);
      width: 100%;
      height: 100px;
  }
  
  
  .topnav {
    overflow: hidden;
    background-color: rgba(0,0,0,0.7);
    position: relative;
  }
  
  .topnav #myLinks {
    display: none;
  }
  
  .topnav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 20px;
    display: block;
    height: 60px;
  
  }
  .topnav2 a {
    text-align: center;
  }
  
  .topnav a.icon {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 90px;
    width: 90px;
  }
  
  .topnav2 a:hover {
    background-color: rgba(0,0,0,0.4);
    color: #ff6000;
  }
  </code></pre>
  
  <p><strong>TOPNAV</strong> </p>
  
  <pre><code>        &lt;a href="#home" class="active"&gt;&lt;h2 class="black"&gt;OSKARI ALAJÄRVI&lt;/h2&gt;&lt;p class="light"&gt;Portfolio&lt;/p&gt;&lt;/a&gt;
          &lt;div class="topnav2" id="myLinks"&gt;
              &lt;a href="/"&gt;Home&lt;/a&gt;
              &lt;a href="/category/blog/"&gt;Blog&lt;/a&gt;
              &lt;a href="#contact"&gt;Contact&lt;/a&gt;
          &lt;/div&gt;
          &lt;a href="javascript:void(0);" class="icon" onclick="myFunction()"&gt;
          &lt;i class="hamburger_bars" onclick="myFunction2(this)"&gt;
              &lt;div class="bar1"&gt;&lt;/div&gt;
              &lt;div class="bar2"&gt;&lt;/div&gt;
              &lt;div class="bar3"&gt;&lt;/div&gt;
          &lt;/i&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>DIV</strong></p>
  
  <pre><code>&lt;div class="content"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm pt-5 pb-5"&gt;
  
                  &lt;div class="etusivun_teksti" data-aos="fade-up"&gt;
                  &lt;?php if (have_posts()) : while(have_posts()) : the_post();?&gt;
  
                      &lt;?php the_content();?&gt;
  
                  &lt;?php endwhile; endif;?&gt;
  
  
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
  
              &lt;div class="col-sm etusivun_kuva"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>