i have problems with responsive navbar

I want to create a navbar, to use it in my website, but i have a problem at the height of the header.when we get into website by pc i want the header to be 10vh but when i make it responsive(get into website by phone) i want the header to be bigger,like 100vh.With this code that i posted the header always stays at 10vh doesnt change.

.header {
    width: 100%;
    height: 10vh;
    background:black; 

    position: relative;
   overflow: hidden;
}
@media screen and (max-width: 700px){
header{
    width: 100%;
    height: 100vh;
    background:black; 

    position: relative;
   overflow: hidden;
    }