Menu Icon not showing on mobile

Question

I am trying to get my menu icon to show next to my logo at the top right of the navigation bar, but it's not showing on mobile. Any help is appreciated, I really don't know where to start, I've tried to tweak with the margins but no luck.

CSS:

@media only screen and (max-width: 321px) {
    body {
        line-height: 1.25em;
        font-family: 'Questrial', sans-serif;
        color: #505050;
        margin: 0;
        padding: 0;
    }

    header {
        background: #505050;
        width: 100%;
        height: 80px;
        position: fixed;
        top: 0;
        left: 0;
        border-bottom: 1px solid #fff;
        z-index: 100;
        padding-bottom: 10px;
        margin-bottom: 5px;
    }

    #menu-icon {
        width: 15px;
        height: 15px;
        background: #fff url(img/menu-icon.png) center;
        position: relative;
    }

    #logo {
        margin-top: 10px;
        margin-left: 10px;
        float: left;
        width: 170px;
        height: 70px;
        display: block;
    }

    nav {
        float: right;
        padding-right: 300px;
        color: #fff;
        margin-top: 25px;
    }

    nav .active {
        font-size: 20px;
        color: #cc293f;
        font-weight: bold;
    }

    nav a {
        margin-right: 20px;
        font-size: 20px;
        color: #fff;
        text-decoration: none;
        font-weight: bold;
    }

    a:hover {
        color: #cc293f
    }

    a:hover#menu-icon {
        background-color: #fff;
        border-radius: 4px 4px 0 0;
    }

    ul {
        list-style: none
    }

    li {
        color: #fff;
        display: inline-block;
        float: left;
    }
}

HTML:

<header>
    <img id="logo" src="img/logo.png">
    <nav>
        <a href="#" id="menu-icon"></a>
        <ul>
            <li><a class="active" href="index.html">HOME</a></li>
            <li><a class="nav" href="upload.html">UPLOAD</a></li>
            <li><a class="nav" href="support.html">SUPPORT</a></li>
            <li><a class="nav" href="faqs.html">FAQS</a> </li>
        </ul>
    </nav>
</header>

Answer 1

The a#menu-icon is retaining a display property of inline . Thus, the width and height properties you're setting have no effect. Try adding display: inline-block .

Answer 2

I added the following code from an old version of the website, here is the code:

#menu-icon {    display: inline-block }
nav ul, nav:active ul {
    display: none;
    position: absolute;
    padding: 10px;
    background: #505050;
    border: 5px solid #fff;
    right: 20px;
    top: 60px;
    width: 50%;
    border-radius: 4px 0 4px 4px;
}
nav li {
    font-color: #fff;
    text-align: center;
    width: 100%;
    padding: 10px 0;
    margin: 0;
}
nav:hover ul {
    background-color: #505050;
    display: block;
}
nav ul {    background: #505050 }

}