Nav bar disappears upon toggling in JQuery

Question

I'm trying to make a responsive Navigation Bar Menu in jQuery, but one problem is when you resize the window, click the menu button, then click it again, and then resize the window to full screen, the navigation bar will disappear. I'm not sure how to fix this.

Here is a JSFiddle: https://jsfiddle.net/tqu1edez/ I also posted the code here too.

HTML:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" type ="text/css" href = "nav.css">
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    </head>
    <body>
    <nav class = "navigationBar">
    <img src = "https://i.imgur.com/nfbKl0W.png" class = "menuIcon">
    <ul class = "linkBar">

      <li><a href = "#">Home</a></li>
      <li><a href = "#">Contact</a></li>
      <li><a href = "#">About</a></li>
      <li><a href = "#">Media</a></li>
      <li><a href = "#">Miscellaneous</a></li>

    </ul>
    </nav>

    <script>

    $('.menuIcon').on('click', function() {
      $('nav ul').fadeToggle('slow');
    });

    </script>
    </body>
    </html>

CSS:

    @import url('https://fonts.googleapis.com/css?family=Asap');

    body
    {
  background-color: #598392;
  margin: 0;
  padding: 0;
  font-family: 'Asap', sans-serif;
}

.menuIcon
{
  display:none;
}

.navigationBar
{
  background-color: #124559;
  width:100%;
  overflow:hidden;
}
.navigationBar li
{
  padding:20px;
  display: inline;
  list-style-type:none;

}

a
{
  color: #EFF6E0;
  text-decoration: none;
}
a:hover
{
  color: #AEC3B0;
}
nav ul
{

  padding: 20px;
  margin: 0;
}

.show
{
  display:block;
  transition: fadeIn 2s
}
@media only screen and (max-width: 768px)
{
  .menuIcon
  {
    display:block;
  }
  .navigationBar li
  {
    display:block;
    padding: 0px;
    text-align: center;
  }
  nav ul
  {
    display:none;
  }
}

Refresh the page when resize. check this link. [Refresh when resize](https://stackoverflow.com/questions/14915653/refresh-page-on-resize-with-javascript-or-jquery) — mkltkn, Jan 03 '18 at 22:13
That doesn't help my case, what if the user was on some part of the page and I don't want it to auto refresh for them, but just to resize the page so the navbar will reappear — Stuy, Jan 03 '18 at 22:16

score 0 · Accepted Answer · answered Jan 03 '18 at 22:22

0

Just need to force the nav to show if the screen is large enough

@media only screen and (min-width: 768px)
{
  nav ul
  {
    display: block !important;
  }
}

answered Jan 03 '18 at 22:22

abney317

7,760
6
32
56

Please bare in mind that typically the usage of `!important` indicates a flaw in your code that is likely to bite you in the future. Avoid it where possible. Consider using classes to hide/show the list which can be controlled with media break points instead. – damanptyltd Jan 03 '18 at 23:30

Nav bar disappears upon toggling in JQuery

1 Answers1