Title: DropKick.js Menu - Always open when page loads
Tags: javascript;html;css
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"&gt;
    <a href="#" id="pull"&gt;Menu</a&gt;
</div&gt;
```

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

My Javascript:

```<script type="text/javascript"&gt;
    $(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 &gt; 320 &amp;&amp; menu.is(':hidden')) {
                menu1.removeAttr('style');
            }
        });
    });
</script&gt;
```

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&gt;``` and ```<li&gt;``` dynamically inside the ```<div id="mobilemenu"&gt;```




Here is the accepted answer: 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;
}
```

Comment for this answer: Can you replicate the issue on jsfiddle.net? In the code I posted above it's referencing a 'nav' element. Do you have that element on your page? You're also using a lot on !important commands in your CSS which may cause issues.
Comment for this answer: I've recreated yours here using a mixture of the tutorial code and your code. Hope this helps: http://jsfiddle.net/cHNWe/2/
Comment for this answer: No worries, glad I could help.
Comment for this answer: I guess I wasn't paying enough attention to the tutorial, for that I apologize. But thank you for helping me out here - and for going through the tutorial to find the missing part I forgot!

---- EDIT ----
Apparently, the menu is still open when you load the site. It looks better - but it's still open.
Comment for this answer: That's amazing Billy! It works like a charm. Thank you very much for provinding this fix :)!


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2012:00:11/22/12', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><html><css>', 'Title': 'DropKick.js Menu - Always open when page loads', 'ViewCount': 495, 'id': 13510099, 'user_AboutMe': None, 'user_AccountId': None, 'user_DisplayName': None, 'user_Reputation': None, 'user_Views': None, 'user_id': None}}