1

I have a menu that is visible on desktop but hidden on mobile viewports. It becomes visible on mobile through a hamburger toggle.

My problem is that once the mobile toggle has been activated once on a mobile viewport, the menu is no longer visible when the window is resized to desktop proportions.

The only way to get it back is to reload the page. This is not something I want to be the case. I would like it to revert on resize.

(This may seem unimportant or contrived but consider the user turning their mobile screen sideways: they would loose the non-mobile menu.)

I have attached a minimal working example via JS Fiddle.

I would be very grateful for any advice. I am not very good with JS/jQ so I appreciate this may be a very rookie problem.

Thank you. 

$(document).ready(function() {
  $('#toggle').click(function() {
    $('.hide').slideToggle('slow').addClass("show");
    return false;
  });
});
.block {
  background-color: lightblue;
  border: 2px solid blue;
}

.menu {
  padding: 2em;
  background-color: yellow;
}


/*Toggle controls*/

@media only screen and (max-width: 768px) {
  .hide {
    display: none;
  }
  .show {
    display: visible;
  }
}


/*Hide hamburger icon on desktop*/

@media only screen and (min-width: 768px) {
  .hamburger {
    display: none;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
  <div id="toggle" class="hamburger block">
    &#9776;
  </div>

  <div class="site title block">
    Site Title
  </div>

  <div class="menu hide">
    Placeholder for menu
  </div>
</header>
Thomas Bishop
  • 105
  • 1
  • 1
  • 7
  • My native Russian language. I did not quite understand your problem. Can you give an example in pictures what needs to be done? So I will understand you better and help. – Vladimir Rodichev Jun 03 '19 at 14:18
  • You need to look into grabbing specific orientations or agents. Even if you restrict to 1024, that means that older pcs that run in 1024x768 will get this restriction. Also check the [orientation change event](https://api.jquerymobile.com/orientationchange/) – Jabberwocky Jun 03 '19 at 14:26
  • Your .show class should be display block not visible – dahliacreative Jun 03 '19 at 14:34

1 Answers1

0

CSS classes priority is based on the classes declaration order (definition of Cascading Style Sheets): if you use 2 different classes to control the visibility of an element, when the element has both classes, the last you declared in your CSS will dominate over the other until you remove it. What i can understand from the code you posted is different from what you described: i see
- a hamburger menu icon correctly hidden only on desktop and shown on mobiles;
- the desktop menu is hidden by css on mobiles but, when the hamburger is clicked, you add the show class which dominates (since it is declared last) on the hide class forcing the menu to be shown. You do not remove the class show anywhere, so i would expect your menu to be visible from desktop if you resize from mobile to desktop without closing it.

What i suggest you to do, since jQuery slide method works on display property, is to force your desktop-menu display to block with an !important so that the menu will be visible even if resizing from mobile to desktop with closed menu (that's what you want, isn't it?). Then you simply slideToggle the menu with the hamburger. Which is:

@media only screen and (max-width: 768px) {
  .desktop-menu-class {
    display: none;
  }
}

@media only screen and (min-width: 768px) {
  .hamburger {
    display: none;
  }
  .desktop-menu-class {
    display: block !important;
  }
}

And

$(document).ready(function() {
  $('#toggle').click(function() {
    $('.desktop-menu-class').slideToggle('slow');
  });
});

PS: you don't need to write any return statement in jQuery functions unless you need it for something else.

Shizon
  • 149
  • 7