CODEWITHSUNDEEP
javascripthtmlcssasp.net-core-mvc
JAmes
JAmes

Reputation: 281

How to remove class from shared layout on a page?

I have a shared layout like so,

<body>
    <header>
        <nav class="mb-3"></nav>
    </header>
</body>

In a page that uses the shared layout how can I remove mb-3? Set it to mb-0? Or override it? I don't want there to be a margin-bottom.

I've tried to remove it with JavaScript on load but there's a delay and you can see the page jump.

I've also tried to set something like the following, but there's no change.

    body > header > nav {
        margin-bottom: -30px !important;
    }

Thank you

Upvotes: 0

Views: 177

Answers (2)

HolaPz
HolaPz

Reputation: 126

You can use javascript to remove class:

const element = document.querySelector("nav");
element.classList.remove("mb-3");

Upvotes: 2

StudioTime
StudioTime

Reputation: 23989

You can force it by overwriting the actual class, instead of adding another style (not tested):

body > header > nav.mb-3 { /* added .mb-3 */
    margin-bottom: 0 !important;
}

Upvotes: 2

Related Questions