CODEWITHSUNDEEP
jqueryhtmlcss
Jack
Jack

Reputation: 69

My mobile hamburger overlaps other submenu items

My mobile hamburger menu overlaps all other items once I click one item.
All other items cannot be seen or clicked because of this.
How can I fix this?

My site(use in mobile view): http://sstromberg.saldev.nl/index.html

Pictures to make it more clear:

Before: https://i.sstatic.net/0I6Al.jpg After: https://i.sstatic.net/kqOeq.jpg

'Portfolio' and 'Overig' are gone once I click on 'CV'.

My HTML / CSS and JQuery Code : 

$(document).ready(function() {
  $('.icon').on('click', function() {
    $("#menu").slideToggle();
  });
});
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .bar1,
  .bar2,
  .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
  }
  .icon {
    width: 35px;
    margin: auto;
  }
  ul#menu>li {
    width: 100%;
    display: block;
  }
  ul#menu>li>ul.submenu {
    display: none;
  }
  ul#menu>li:hover>ul.submenu {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #f3f3f3;
  }
  ul#menu a:hover {
    transform: scale(1.1);
  }
  ul#menu {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: sans-serif;
    background-color: #f3f3f3;
  }
  ul#menu a {
    display: block;
    padding: 1em;
    /* met 1em word de ruimte tussen de list items 2x zo groot */
    font-family: sans-serif;
    color: #FF4136;
    text-decoration-line: none;
    font-weight: bold;
  }
  .submenu {
    left: -50%;
    right: -50%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hamburger-menu">
  <div class="icon">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
  <ul id="menu">
    <li><a href="index.html">Home</a></li>
    <li>
      <a>CV</a>
      <ul class="submenu">
        <li><a href="pgegevens.html">Persoonlijke Gegevens</a></li>
        <li><a href="werkervaring.html">Werkervaring</a></li>
        <li><a href="opleiding.html">Opleiding</a></li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 0

Views: 884

Answers (1)

pavger
pavger

Reputation: 684

Add position: relative; instead of position: absolute; to ul#menu > li:hover > ul.submenu and remove left: -50%; right: -50%; from .submenu and that should do it. When the submenu is position absolute, it doesn't take up space and goes over the menu below but with position relative, it'll take up the space and move the other menu items. Make sure to do this in a media query that targets only the mobile menu, because the desktop menu needs the position: absolute; on the submenu.

Upvotes: 2

Related Questions