html - collapsing nav bar at X browser width @media query not working -

html - collapsing nav bar at X browser width @media query not working -

hi guys wondering why cant media query shrink nav bar. have next css:

@media screen , (min-device-width:1024px) { div.large-7.push-5.columns.last{ height: emcalc(1px); } } @media screen , (max-device-width: 745px){ .top-bar .toggle-topbar.menu-icon { color: $steel; height: 34px; line-height: 33px; padding: 0 25px 0 0; position: relative; } .top-bar .toggle-topbar.menu-icon a:after { box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel; content: ""; display: block; height: 0; position: absolute; right: 5px; top: 0; width: 16px; } } @media screen , (max-device-width: 480px) {

everything works intended on mobile, in desktop/laptop browser window won't respond want when shrink browser around 745px mark. don't know why , haven't been able find help on issue. if prefer see site in action it's www.omegadesignla.com . in advance awesome inputs , upvotes.

media queries should utilize min-width , max-width not min-device-width , max-device-width, latter 2 beingness fixed device regardless of window size.

html css media-queries