mmenu Wrapping All Body Elements Instead of Page Selector

By -

I've got mmenu up and running and doing everything I need it to do, except that it's breaking my sticky footer because it is automatically wrapping all code inside <body>.

My script has

page: { selector: "#page" }

and I have the content I want to be wrapped inside <div id="page"></div> and yet it still wraps around everything.

I am using the latest version from mmenujs.com.

Here's an example layout of what I've got:

<html>
<head>
    <link href="mmenu/mmenu.css" rel="stylesheet" />
</head>
<body style="min-height: 100vh; display: flex; flex-direction: column;">
    <div id="page">All the page content</div>
    <div id="footer" style="padding-top: 30px; padding-bottom: 20px; margin-top: auto;">My sticky footer</div>
    <nav id="navmenu">
        <ul>
            <li><span>HOME</span></li>
            <li><span>Example</span>
            <ul>
                <li><span>Test</span></li>
            </ul>
            </li>
        </ul>
    </nav>
    <script src="mmenu/mmenu.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            function mediaqueryresponse(mql) {
                var mmenuOptions = {
                    navbar: {
                        title: "My Menu"
                    },
                    offCanvas: {
                        page: {
                            selector: "#page"
                         },
                        position: "left-front"
                    },
                    pageScroll: {
                        scroll: true,
                        update: true
                    },
                    setSelected: {
                        current: "detect",
                        hover: true
                    },
                    sidebar: {
                        collapsed: {
                            use: "(min-width: 50px)"
                        },
                        expanded: {
                            use: "(min-width: 1024px)"
                        }
                    },
                    theme: "dark-contrast"
                };

                if (mql.matches) {
                    mmenuOptions.navbars = [
                        {
                            position: "top",
                            content: [
                                "prev",
                                "title",
                                "close"
                            ]
                        }
                    ];
                } else {
                    mmenuOptions.navbars = [
                        {
                            position: "top",
                            content: [
                                "prev",
                                "title"
                            ]
                        }
                    ];
                }

                new Mmenu("#navmenu", mmenuOptions);
            }

            const mql = window.matchMedia("screen and (max-width: 900px)");
            mediaqueryresponse(mql);
            mql.addListener(mediaqueryresponse);
        });
    </script>
</body>
</html>

What happens is this:

<div id="mm-4" class="mm-page mm-slideout">
<div id="page"></div>
<div id="footer"></div>
</div>

which breaks my sticky footer.

I need it to be:

<div id="mm-4" class="mm-page mm-slideout">
<div id="page"></div>
</div>
<div id="footer"></div>

I know offCanvas is working because I can change position to be "right-front" and the menu appears on the right. I also have confirmed that #page is in the DOM before the function runs.

Of course without mmenu, my sticky footer works perfectly.

Not sure what I'm doing wrong, but appreciate any help. Thanks!



Comments

Post a Comment