CODEWITHSUNDEEP
jqueryhtmlcss
Lisa Lemons
Lisa Lemons

Reputation: 160

Responsive jQuery hamburger icon "disappears" on click

I'm making my first responsive menu from scratch. My tools are jQuery, HTML, and CSS.

I've got a fiddle here: http://jsfiddle.net/DznpQ/9/

The problem is that once you click the hamburger menu icon, it "disappears". Inspecting the source tells a different story: The hamburger icon is still there, it's just moved so far it's no longer visible.

I'm unsure of why the icon is moving in the first place or I might be able to fix it. As always, thanks for the help.

HTML:

<div class="header">
    <!-- Container -->
    <div class="headerContainer container">
        <!-- Logo -->
        <div class="logo col-md-3 alpha" style="
    width: 206px;
    margin-right: 0;
"> <a href="/"><img id="p_lt_Logo_Logo_ucEditableImage_imgImage" src="http://placehold.it/206x63" alt=""></a>

        </div>
        <!--/ End Logo -->
        <!-- Navigation -->
        <div class="navigation col-md-9 omega">
            <div class="mobile-menu">
                <img src="https://cdn4.iconfinder.com/data/icons/miu/22/editor_list_view_hambuger_menu-48.png" alt="menu" class="pull-right hamburger">
            </div>
            <ul id="menuElem" class="CMSListMenuUL" style="display: none;">
                <li class="CMSListMenuHighlightedLI">   <a class="CMSListMenuLinkHighlighted" href="/">Home</a>

                </li>
                <li class="CMSListMenuLI">  <a class="CMSListMenuLink" href="/About">About</a>

                </li>
                <li class="CMSListMenuLI">  <a class="CMSListMenuLink" href="/Contact">Contact</a>

                </li>
            </ul>
        </div>
        <!--/ End Navigation -->
    </div>
    <!--/ End Container -->
</div>

CSS

    ol, ul {
        list-style: none;
    }
    .headerContainer {
        position: relative;
    }
    .mobile-menu {
        display:block;
        position: absolute;
        bottom: 30px;
        right: 5px;
    }
    .hamburger:hover {
        -webkit-filter: drop-shadow(3px 3px 3px #3C3C3C);
        filter: drop-shadow(3px 3px 3px #3C3C3C);
    }
    ul.navigation {
        height: auto;
    }
    .navigation li {
        float: none;
        width: 100%;
        margin: 0;
    }
    ul.navigation a {
        line-height: 40px;
    }
    .navigation ul {
        float: none;
        position: relative;
        background: url("http://mcbeev.com/MBV/media/layout/background_header.jpg") repeat-x;
    }
    .navigation {
        width: 100%;
    }
    .headerContainer {
        background-color: #23518f;
    }
}

jQuery

jQuery(function ($) {
    $('.mobile-menu').click(function () {
        $('#menuElem').toggle();
    });
});

Upvotes: 0

Views: 855

Answers (1)

pizzarob
pizzarob

Reputation: 12029

Declare the top value rather than using bottom

.mobile-menu {
    display:block;
    position: absolute;
    right: 5px;
    top: 18px;
}

Upvotes: 4

Related Questions