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 better default behavior.

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
{
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.

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