@media remove top:0; from style

Question

So I've been wasting a ton of time on this little thing. Hoping someone around here can help me out.

I have a right side navigation panel.

.navbar_right{
 width: 365px;
 top:0;
 height:100%;
 position:fixed;
 right:0;
}

Now when my website breaks at the width of 1400, I want that same menu placed to the right, but at the bottom instead of the top. So how do I go about removing top:0; and adding bottom:0; instead.

@media (max-width: 1400px) {
 .navbar_right{
 bottom:0;
 height:40%;
 }
}

I would prefer to be able to use the same container, as the platform I'm working on will be pushing content into the navigation panel, so if I can achieve this small thing - I'll save a lot of resources. Also I'd prefer to avoid jQuery for the same reason. Is it possible to stick with this one box, maybe delete a class and add another one?

Answer 1

.navbar_right{
 width: 365px;
 position:fixed;
 right:0;
}

@media (max-width: 1400px) {
 .navbar_right{
 bottom:0;
 height:40%;
 }
}

@media (min-width: 1399px) {
 .navbar_right{
 top:0;
 height:100%;
 }
}