Menu not shown on mobile device

At this site, on a mobile device, there should be a button in the left upper corner to show the menu. But it will not show.

The javascript file that’s necessary for this, is uploaded and accessible.

positions:{panels:{top:[M, x], right:[M, P], bottom:[Q, x], left:[M, x]}, overlays:{"top-left":{top:0, left:0}, "top-right":{top:0, right:0}, top:{top:0, left:_}, "top-center":{top:0, left:_}, "bottom-left":{bottom:0, left:0}, "bottom-right":{bottom:0, right:0}, bottom:{bottom:0, left:_},
        "bottom-center":{bottom:0, left:_}, left:{top:_, left:0},
        "middle-left":{top:_, left:0}, right:{top:_, right:0},
        "middle-right":{top:_, right:0}}},
        presets:{
            standard:{
                panels:{navPanel:{breakpoints:"mobile", position:x, style:xt, size:"80%", html:'<div data-action="navList" data-args="nav"></div>'}},
                overlays:{
                    titleBar:{
                        breakpoints:"mobile",
                        position:Dt, width:Y, height:44,
                        html:'<span class="toggle" data-action="togglePanel" data-args="navPanel"></span><span class="title" data-action="copyHTML" data-args="logo"></span>'
                    }
                }
            }
        },
        defaults:{config:{panel:{breakpoints:"",
                position:L,
                style:L,
                size:"80%",
                html:"",
                resetScroll:St,
                resetForms:St,
                swipeToClose:St},
                overlay:{breakpoints:"",
                        position:L,
                        width:0,
                        height:0,
                        html:""}}},
        recalcW:function(e){var t = parseInt(e); return typeof e == vt && e.charAt(e[K] - 1) == "%" && (t = Math.floor(jQuery(window)[c]() * (t / 100))), t},
        recalcH:function(e){var t = parseInt(e); return typeof e == vt && e.charAt(e[K] - 1) == "%" && (t = Math.floor(jQuery(window)[T]() * (t / 100))), t},
        getHalf:function(e){var t = parseInt(e); return typeof e == vt && e.charAt(e[K] - 1) == "%"?Math.floor(t / 2) + "%":Math.floor(t / 2) + "px"},
        parseSuspend:function(e){var t = e.get(0); t[p] && t[p]()},
        parseResume:function(e){var t = e.get(0); t[o] && t[o]()},
        parseInit:function(r){var i, s, u = r.get(0),
                a = r[it]("data-action"), f = r[it]("data-args"),
                l, d; a && f && (f = f.split(","));
                switch (a){case"togglePanel":case"panelToggle":r[h](H, gt)[h]("cursor", Rt),
                i = function(r){r[w](), r[g](); if (rn[e][t])
                        return rn[e][t][n](), Z;
                        var i = jQuery(this), s = rn[e].panels[f[0]];

#nav
{
    display: none;
}

#navPanel
{
    background: #101214;
    font-weight: 400;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 2px;
    font-size: 1em;
}

#navPanel .link
{
    display: block;
    color: #ddd;
    text-decoration: none;
    height: 44px;
    line-height: 44px;
    border: 0;
    border-top: solid 1px #202122;
    padding: 0 1em 0 1em;
}

#navPanel .link:first-child
{
    border-top: 0;
}

#navPanel .link.depth-0
{
    font-weight: 600;
    color: #fff;
}

#navPanel .indent-1 { display: inline-block; width: 1em; }
#navPanel .indent-2 { display: inline-block; width: 2em; }
#navPanel .indent-3 { display: inline-block; width: 3em; }
#navPanel .indent-4 { display: inline-block; width: 4em; }
#navPanel .indent-5 { display: inline-block; width: 5em; }
#navPanel .depth-0 { color: #fff; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header-wrapper">
    <div id="header">
        <div id="logo">
            <p>Pannenkoekenhuisje</p>
            <h1>Suskewiet</h1>
            <p>Westerlo</p>
        </div>
    </div>

    <?php
    $menuItems = array("Welkom", "Openingsuren", "Informatie", "Gallerij"); //, "Contact"
    $menuItemsNotVissibleMob = array("Gallerij");
    ?>

    <div class="container">
        <nav id="nav">                
            <ul>
                <?php
                foreach ($menuItems as $menuItem) {
                    if (strtolower($menuItem) == $page) {
                        echo '<li class="current_page_item"';
                    } else {
                        echo '<li';
                    }
                    
                    if (in_array($menuItem, $menuItemsNotVissibleMob)) {
                        echo ' id="mobileHidden"';
                    }

                    echo '><a href="index.php?page=' . strtolower($menuItem) . '">' . $menuItem . '</a></li>';
                }
                ?>
            </ul>

            <div id="navInfo">
                <?php include("footer.php"); ?>
            </div>
        </nav>
    </div>
</div>

I probably forgot something, but can’t find what…

Answer

Screenshot of console

It looks like you forget to load jQuery, what is necessary for skel-panels.min.js that you use.

Include this script under your skel-panels script:

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

Advertisement

Answer