This is what you are looking for:

@media only screen and (max-width:850px) {
    /* STYLES HERE */
}

@media only screen and (min-width:851px) and (max-width:2000px) { 
    /* STYLES HERE */
}

you need to use and.

I am trying to get my website to have a separate top banner when in desktop mode to mobile mode with responsive @media tags

So, I have been struggling to understand what I am doing wrong? I am trying to make it so that in desktop mode it will use the desktop top header banner which it does but then when it gets to about 850px width it will then switch to the mobile top header which are icons instead of text along the header.

No matter what I try it doesn’t seem to work and both headers are present no matter what width the website is at.
I have tried using code such as this;

@media (max-width:850px){
.mobile_menu{
    display:none !important; 
    }
}

@media (max-width:2000px min-width:850px){
.top-menu-container{
    display:none !important;
    }
}

Please if anyone can help much appreciated and I apologize in advance if I am just being stupid and not realizing something as I am fairly new to the whole @media coding in CSS.