Fixed elements introduction

If your page contains elements with position: fixed; or position: sticky; that suddenly disappear when opening the menu, add the classname 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>
   document.addEventListener(
      "DOMContentLoaded", () => {
         new Mmenu( "#my-menu", {
            // 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 Datatype Default value Description
fixedElements
{
fixed
{
insertMethod String "append" How to insert the fixed element to the DOM.
Possible values: "prepend" and "append".
insertSelector String "body" Query selector for the element the fixed element should be inserted in.
}
sticky
{
offset Number 0 Aditional deviation for the offset for the sticky elements.
}

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

<script>
   Mmenu.configs.classNames.fixedElements = {
      fixed: "Fixed",
      sticky: "Sticky"
   };
</script>

API methods for the "fixedElements" add-on

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

CSS variables for the "fixedElements" add-on

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

SCSS variables for the "fixedElements" add-on

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

Next add-on:
Iconbar