CODEWITHSUNDEEP
jqueryhtmlcss
Christian Luneborg
Christian Luneborg

Reputation: 511

3 lines drop down menu issue

I have a problem displaying the drop down menu on the responsive mobile phone. Please see the testing page and resize your browser or check your mobile. Notice the 3 line icon drop-down menu will not show up.

When the 3-line icon is clicked, it calls the JS toggleClass = "active" to display the existing menu from HTML, but nothing is happening. What did I do wrong?

HTML

<div class="wrap">
    <nav class="menu">
        <ul class="active">
            <li class="active"><a href="#home">Home</a></li>
            <li><a href="#logo">Logos</a></li>
            <li><a href="#banner">Banners</a></li>
            <li><a href="#email">Email/Promotions</a></li>
            <li><a href="https://dribbble.com/search?q=Christian+Luneborg">Art</a></li>
            <li><a href="#website">Websites</a></li>
            <li><a href="#mobile">Mobiles</a></li>
            <li><a href="https://www.linkedin.com/in/christian-luneborg-bb13431b" target="_blank"><img src="img/linkedin-logo-sm.png" /></a></li>
        </ul>
      <a class="toggle-nav" href="#">&#9776;</a>
    </nav>
</div>

CSS

@media screen and (max-width: 860px) {
.menu {
    position:relative;
    display:inline-block;
}

.menu ul.active {
    display:none;
}

.menu ul {
    width:100%;
    position:absolute;
    top:120%;

    background:#1e1e1e;
}

.menu ul:after {
    width:0px;
    height:0px;
    position:absolute;
    top:0%;
    content:'';
    transform:translate(0%, -100%);
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-bottom:7px solid #303030;

}

.menu li {
    margin:5px 0px 5px 0px;
    float:left;
    display:block;

}

.menu a {
    display:block;

}

.toggle-nav {
    float:left;
    display:inline-block;
    background:#1e1e1e;
    color:#777;
    font-size:20px;
    transition:color linear 0.10s;

}

.toggle-nav:hover, .toggle-nav.active {
    text-decoration:none;
    color:#66a992;
}
}

JS

jQuery(document).ready(function() {
    jQuery('.toggle-nav').click(function(e) {
    jQuery(this).toggleClass('active');
    jQuery('.menu ul').toggleClass('active');

    e.preventDefault();
    });
});

Upvotes: 0

Views: 333

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

You have overflow: hidden; on .wrap and that's keeping the menu from displaying since the menu is position: absolute and overflows and displays outside of .wrap.

Remove overflow: hidden; from .wrap (or set it to overflow: visible;) and the menu will show up.

Upvotes: 2

Related Questions