How do I over write inline css

Question

I have identified an inline style that I need to change. I cant locate how it got there or which specific rule I need to target to change it.

<div class="main-navigation-wrap main-navigation-sm d-lg-none is-active" style="top: 501px; height: 331px;">

This is what I want to over write when viewed in inspect element.

I want to remove the top to 0

I tried this:

.main-navigation-wrap .main-navigation-sm .d-lg-none .is-active

{
top: 0!important; 

}

and this:

.main-navigation-wrap .main-navigation-sm .d-lg-none .is-active          [style] {
top: 0!important;;
}

You can probably tell that my css knowledge is limited. How can I target and overwrite this inline style please.

Remove the spaces between the rules. But since you use !important, its enough to just write .main-navigation-wrap { top: 0 !important; } — elveti, Jul 07 '19 at 20:29

score 0 · Answer 1 · answered Jul 07 '19 at 20:36

Your first CSS rule example was close, but since all of those classes belong to the same div, you can't have spaces between them. Also, generally speaking, you want a space before !important, e.g. top: 0 !important;:

.main-navigation-wrap.main-navigation-sm.d-lg-none.is-active
{
    position: relative;
    top: 0!important; 
}

<div class="main-navigation-wrap main-navigation-sm d-lg-none is-active" style="top: 501px; height: 331px;">THIS DIV</div>

score 0 · Answer 2 · answered Jul 07 '19 at 20:39

As comments said, since you add !important it will change the inline style of the element.

The reason it is not - is that you point to a non-exist element. Your div have couple of classes and you need to choose to whom you want to change. Your markup is combination that doesn't exist.

Read here for css combinations on MDN

How do I over write inline css

2 Answers2