-2

I've implemented the jquery mmenu (http://mmenu.frebsite.nl/) and everything seems to be working great except that the animation is a little glitchy.

In the mmenu demo the content is pushed to the right by the menu and my menu overlaps the content. I suspect this is the reason for the animation problem as well. I've tried to debug this and looked around but I cant seem to find anything. The cause could be anything so im providing a link to my development site to examine the code.

Here is the important bits of code related to the implementation:

<nav id="mmenu" style="height:auto;z-index:999">
                    <ul>
                      <li><a href="/home"><b>Home</b></a></li>
                      <li><a href="/collections/all-saris-1"><b>Collections</b></a></li>
                      <li><span><b>Information</b></span>
                        <ul>
                          <li><a href="/pages/about-us">About Us</a></li>
                          <li><a href="/pages/privacy-policy">Privacy Policy</a></li>
                          <li><a href="/pages/returns-cancellations-refunds">Returns, Cancellations & Refunds</a></li>
                          <li><a href="/pages/shipping-delivery">Shipping & Delivery</a></li>
                          <li><a href="/pages/terms-and-conditions">Terms & Conditions</a></li>

                        </ul>
                      </li>
                      <li><a href="/cart"><b>Shopping Bag ({{ items_in_cart }})</b></a></li>
                      <li><a href="/account/login"><b>Login/ Register</b></a></li>

                    </ul>
                </nav>

 <script type="text/javascript">
         jQuery(document).ready(function( $ ) {
            $("#mmenu").mmenu({
               "extensions": [
                  "border-full",
                  "pageshadow",
                  "effect-slide-menu"
               ],
               "searchfield": {
                  "noResults": "Oops! No results found. Click for a detailed search",
                  "add": true,
                 "form":true
               },
               "navbar": {
                  "title": "Title"
               },
               "backButton": {
                 "close" : true
               },
               "navbars": [
                  {
                     "position": "top",
                     "content": [
                        "prev",
                        "title",
                        "close"
                     ]
                  }
               ]
            });
         });
      </script>

I've included the css of the html and the body because its relevant. 

body {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF;
    overflow-x: hidden;
    }

Thanks for your time and have a great day.

Isabel Inc
  • 1,871
  • 2
  • 21
  • 28
  • What have you done so far? Give some minimal code example. – dingo_d Jul 22 '15 at 06:20
  • Sorry about that dingo. I posted the question when I was really frustrated and didnt think to post code. I've added the relevant code to the question. – Isabel Inc Jul 22 '15 at 16:08

1 Answers1

1

I had the same problem and noticed that you have to put all your content inside a <div> like this:

<body>
  <div> <!-- the wrapper -->
    <div id="my-header">
       <nav id="mmenu">
          ...
       </nav>
    </div>
    <div id="my-content">
       ...
    </div>
    <div id="my-footer">
       ...
    </div>
  </div>
</body>

This fixed the problem for me.

You can read more about it here:

NikWins
  • 46
  • 4