Max-Width vs. Min-Width

2 Part Answer

Part 1: To answer “why people are using min-width over max-width?”:

It has to do with design flow. Typically, with min-width patterns, you’re designing mobile-first. With max-width patterns, you’re design desktop-first.

Going mobile-first with min-width, the default style is the mobile style. Queries after that then target progressively larger screens.

body {
    /* default styles here, 
       targets mobile first */
}

@media screen and (min-width:480px) {
    /* style changes when the screen gets larger */
}

@media screen and (min-width:800px) {
        /* And even larger */
    }

Conversely, using max-width, is desktop-first then adds queries to make styles mobile-friendly

body {
        /* default styles here, 
           targets desktops first */
    }

@media screen and (max-width:800px) {
    /* style changes when the screen gets smaller */
}

@media screen and (max-width:480px) {
        /* And even smaller */
    }

Part 2: For your particular custom navigation for any device who’s width is 360px or less:

You could include that as a separate max-width query, IF thats the only exception to the rule. OR use that style as your baseline, then change it for wider screens.

If you do an exception (which isn’t really following mobile-first design methods), it’d be something like:

body {
        /* default styles here, 
           targets mobile first
           ALSO will cover 361 - 479 width */
    }

@media screen and (max-width:360px) {
    /* style ONLY for screens with 360px or less width */
}

@media screen and (min-width:480px) {
    /* style changes when the screen gets larger */
}
etc...