CODEWITHSUNDEEP
htmlcsssass
Damien STEPHAN
Damien STEPHAN

Reputation: 143

How to overwrite the linked scss of a CSS file

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) enter image description here

Upvotes: 0

Views: 538

Answers (3)

Kokodoko
Kokodoko

Reputation: 28158

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

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

Upvotes: 1

loa_in_
loa_in_

Reputation: 1011

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.

Upvotes: 0

iftikharyk
iftikharyk

Reputation: 959

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.

Upvotes: 0

Related Questions