How to add class style with JS?

Question

I am trying to add extra class to nav bar using JS and probably I am doing something wrong.

So I am adding class via classList.add('class') it is showing on inspect that class included but it is not working. Please see code below

html

<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">

css

.navbar .scrolled { background: black;}

JS

document.querySelector("#mainNavbar").classList.add("scrolled");
console.log(document.querySelector("#mainNavbar").classList);

Possible duplicate of [How to change an element's class with JavaScript?](https://stackoverflow.com/questions/195951/how-to-change-an-elements-class-with-javascript) — Obsidian Age, Sep 12 '19 at 23:36

score 2 · Answer 1 · answered Sep 12 '19 at 23:34

2

I think css should be

.navbar.scrolled { background: black;}

Same element classes should be without any space like. .navbar.scrolled

With space it targets child elements.

answered Sep 12 '19 at 23:34

Kawaljit Singh

1 Answers1