Remove "display: none" inline style
So I created a super simple jQuery script, my first. Just learning jQuery. It's a simple toggle menu that kicks in for small screens:
- jQuery(document).ready(function($){
- // Show/hide the navigation
- $('.menu-toggle').click(function() {
- $('#menu-secondary').slideToggle(150);
- $(".menu-toggle a").toggleClass("show-x");
- });
- });
#menu-secondary slides down when you touch the .menu-toggle, which is a little square image. I change the class on .menu-toggle, so that I can reposition a sprite image to make it go from a 3-line menu icon when the menu is closed to an "X" when the menu is open.
Here's the problem: If in a desktop browser I narrow the window, toggle the menu open and close, then resize the window to more normal desktop size, the regular menu does not display -- because the script during toggling has set an in line style on the menu div (#menu-secondary) to "display: none."
Have to hit the logo/home link or refresh the page so the regular menu comes back. I don't know how often someone would encounter this in the real world, but I'd like to fix. I'm guessing this is not to difficult. Thoughts?