How to overwrite the linked scss of a CSS file

Question

I would like to create a navbar fixed on the bottom on mobile but on the left on desktop.

I've inspected the CSS, and the linked scss of the CSS file is overwriting my CSS in the media query.

I've found this post why my css is overriden by scss which is even not included but I can't use a more specific selector.

What could I do ? Note the property have got !important and the menu is <aside>

Screenshots:
In red : the property that I want to override the scss

In yellow : the property of scss which I want to override (it works when disabling it on the inspector)

Answer 1

You may also set top to auto to make sure bottom is more important than top:0

.menu {
  top: auto ;
  bottom : 0 ;
}

Answer 2

remove !important from media queries. This is not a good practice, after that this will work. If you can't then add !important in .menu as well.

Answer 3

You can give your .menu items an additional class

.menu.bottomed {
    bottom: 0px;
}

There's always a way to have a more specific selector, unless it's a selector by id.