Fixed elements introduction

If your page contains elements with position: fixed; or position: sticky; that suddenly disappear when opening the menu, you might want to give the "fixedElements" add-on a try. First include the "fixedElements" add-on .js file.

<head>
   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.fixedelements.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu();
      });
   </script>

Next, add the class Fixed to the fixed elements and Sticky to the sticky elements.

<div id="my-page">
   <div id="my-header" class="Fixed">
      The header.
   </div>
   <div id="my-content">
      Some text.
   </div>
</div>

If you're using a different classname (for example "fix" or "stick"), you must specify this in the classNames.fixedElements.fixed or classNames.fixedElements.sticky options in the configuration object.

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         // options
      }, {
         // configuration
         classNames: {
            fixedElements: {
               fixed: "fix",
               sticky: "stick"
            }
         }
      });
   });
</script>

Note that, where possible, it is advised to use position: stikcy; in favor of position: fixed; due to the less hacky workaround.

Options for the "fixedElements" add-on

The "fixedElements" add-on has no options.

Configuration for the "fixedElements" add-on

Option Default value Datatype Description
fixedElements
{
elemInsertMethod "appendTo" String How to insert the element to the DOM.
Can be any of the jQuery DOM insertion methods such as "prependTo" or "insertAfter".
elemInsertSelector "body" String jQuery selector for the node the element should be inserted in.
}

The "fixedElements" add-on also adds an object to the classNames option.

$.mmenu.configuration.classNames.fixedElements = {
   fixed: "Fixed",
   sticky: "Sticky"
};

API methods for the "fixedElements" add-on

The "fixedElements" add-on has no API methods.

SCSS variables for the "fixedElements" add-on

The "fixedElements" add-on has no SCSS variables.

Next add-on:
Icon panels