Semantic-UI Transistioning from mobile to tablet displays with the sidebar open-open source projects Semantic-Org/Semantic-UI

Thanks for updating the Fiddle example, the issue appears to be that there is a conflict between the visual changes being made by the CSS and jQuery. Also, there is no code anywhere forcing the mobile menu to hide once the screen size changes back to desktop.

The solution I came up with is first to adjust the CSS to cater for the major visual changes for each media query, then do the same for the jQuery changes using a listener that checks for changes to the screen width.

Here’s a Fiddle of it in action

CSS

In case scripts are turned off, your CSS should always handle the basics of what you want to acheive. Otherwise, the page may break. This also has the huge benefit of less page load (never use JS when CSS can handle it).

You need to be explicit about what should happen to any mobile/non-mobile element if you change it at all using media queries. Given we’re talking about something that has states: showing/hidden, you must specify what those states involve:

For you mobile layout:

@media all and (max-width:630px) {

/* First, hide the main menu */
    #menu {
      display:none;
    }
/* then display the mobile menu */
    #m_menu {
        display:block;
    }
/* lastly, show your mobile menu button */
    #m_btn{
        display:inline-block;
    }
}

Desktop layout

Basically undo everything you did for the mobile version:

@media all and (min-width:631px) {
/* Hide the mobile menu */
    #m_menu {
        display:none;
    }
/* Unhide the regular menu */
    #menu{
      display:block;
    }
/* Lastly, hide the mobile menu button */
    #m_btn{
       display:none;
   }    
}

Alternately, you could remove the media query around the desktop styles altogether, as any styles specified outside of the (max-width:630px) will be applied regardless once 630px is exceeded.

jQuery

You can then apply a listener to check for when the width changes past your chosen breakpoint. It’s tricky to grab the exact width, as ‘630’ fired too wide, so I went with 617 as it matched the media query breakpoints closest.

Note that this only applies to resizing the screen, i.e. the user drags their browser size or changes their device orientation from portrait to landscape or vica versa.

Inside the if statement, which will only fire if the screen resizes to desktop size, we can then forcibly hide the #m_menu.

$(window).resize(function() {
// Detect if the resized screen is mobile or desktop width
    if($(window).width() > 617) {
        console.log('desktop'); 
        $('#m_menu').sidebar('hide');
    }
    else {
       console.log('mobile');
    }
});

There’s probably a better way of doing this last part, as .resize() may fire many times per second, and can slow the page noticeably.

In my experience building responsive sites, it’s very useful to have a ‘conditional javascript’ snippet set up specifically for this sort of scenario that behaves in the same way as the media queries.