@media删除top：0; 从风格

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

Set top to its initial value, which is auto :

top: auto;

When you don't know the initial value, you can also use initial :

top: initial;

Or, since top in not inheritable, unset will also reset it to the initial value:

top: unset;

Or, if you want to roll back the cascade to the user level, use revert :

top: revert;

Also see CSS Cascading and Inheritance Level 4 - Explicit Defaulting .

Answer 2

.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%;
 }
}