Question

I have a problem with my dropkick menu for my responsive website. When the site enters iphone size it changes to this dropkick menu using dropkick.js, it’s a dropdown.

My HTML:

<div id="mobilemenu">
    <a href="#" id="pull">Menu</a>
</div>

This above code is only visible if you view the site in 320px width.

My Javascript:

<script type="text/javascript">
    $(function () {
        var pull1 = $('#pull');
        menu1 = $('ul.menuresponsive');
        menuHeight = menu1.height();
        $(pull1).on('click', function (e) {
            e.preventDefault();
            menu1.slideToggle();
        });

        $(window).resize(function () {
            var w = $(window).width();
            if (w > 320 && menu.is(':hidden')) {
                menu1.removeAttr('style');
            }
        });
    });
</script>

I don’t really know much about Javascript, this was taken from a tutorial.

My CSS for when the site is in 320px:

/* Menu */
#mobilemenu { display:block !important; margin-bottom:20px; }
#mobilemenu ul { margin:12px 0 0 0 !important; list-style:none; padding:0 10px 0 10px }
#mobilemenu ul li { float:none !important; font-size:16px; padding:5px 0 5px; font-weight:bold; border-bottom:1px solid #000; }
#mobilemenu ul li a { color:#333; text-decoration:none; }
/* Drop */
#mobilemenu ul li ul li { font-size:14px; font-weight:normal; border:none; color:#000; }

/* Pull */
#pull { display:block !important; text-align:center; color:#fff; text-decoration:none; padding:10px 0 10px 0; font-size:16px; font-weight:bold; }
#menu { display:none; }

As it looks now, the menu is constantly open as shown below, I would very much like it to be closed by default but I can’t seem to find a solution.

My menu is rendered as a <ul> and <li> dynamically inside the <div id="mobilemenu">

Answer 1

In the tutorial you link to the demo example has two media queries – one for 515px and one for 320px.

The css for the 515px will be inherited by the 320px one and it contains the code you need to close the menu I think.

Try adding this code into your media query:

nav {
    border-bottom: 0;
}
nav ul {
    display: none;
    height: auto;
}
nav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: relative;
}
nav a#pull:after {
    content:"";
    background: url('nav-icon.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
}