CODEWITHSUNDEEP
jqueryhtmlcssresponsive-design
knocked loose
knocked loose

Reputation: 3314

When resized, responsive navigation disappears?

I have a responsive drop down navigation that has been experiencing quite a hiccup in terms of functionality.

Basically, the page will load correctly, everything will work, etc. If I resize the page to show my mobile nav, it will show my hamburger menu, let me click and close and all work. But here is the issue

I included some basic HTML my JS function, as well as a link to the site in question.

HTML

<div class="navigation">
  <div class="container1">
    <a class="nav-logo" href="index.html"><img src="img/logo.svg"></a>
    <div class="mobile">
      <ul class="menu nav-left">
        <a href="html/main-pages/portfolio.html"><li class="button">Work</li></a>
        <a href="html/main-pages/resume.html"><li class="button">Resume</li></a>
        <a href="html/main-pages/contact.php"><li class="button">Contact</li></a>
      </ul>

      <ul class="menu nav-right">
        <a href="#"><li class="button"><i class="fa fa-twitter"></i></li></a>
        <a href="#"><li class="button"><i class="fa fa-codepen"></i></li></a>
        <a href="#"><li class="button"><i class="fa fa-linkedin"></i></li></a>
        <a href="#"><li class="button"><i class="fa fa-behance"></i></li></a>
        <a href="#"><li class="button"><i class="fa fa-github"></i></li></a>
      </ul>
    </div>

    <span class="nav-toggle"><a href="#"><i class="fa fa-bars"></i></a></span>
  </div>
</div>

JS

 $( document ).ready(function(){
        $(".nav-toggle").click(function(){
        $(".mobile").slideToggle(500);

        });
});

Last but not least, you can find the problem on this website. Thanks for the help everyone, if there is any questions, I'll be happy to answer them.

For future reference, here is the jsfiddle

Upvotes: 1

Views: 1919

Answers (2)

Viktor Maksimov
Viktor Maksimov

Reputation: 1465

@media (min-width: 480px) {
    .mobile {display: block !important;}
}

Upvotes: 0

Steyn
Steyn

Reputation: 1321

This is because when closing the menu on mobile, .mobile will get a display none. This can be fixed by !important.

@media { /* your desktop media query */
  .mobile {
    display: block !important;
  }
}

Upvotes: 2

Related Questions