html - Navbar Not changing color -

i don't understand why navbar not changing color despite fact added css modify it. simple it's bothering me because not working should.

here html:

<div class="uk-container uk-container-center uk-margin-top">    <nav class="uk-navbar" id="navbar">       <ul class="uk-navbar-nav">           <li class="uk-active"><a href="">login</a></li>       </ul>    </nav> </div> 

and here css:

#navbar {     background-color: black !important; } 

the css property overridden property targets same element either because:

a. new css property preceding older one, or

b. not specific enough css selector #navbar.

solution a:

make sure property:

#navbar {     background-color: black !important; } 

is below other css properties , make sure css file has above property below other css files , see if helps.

---

solution b:

if didn't help, there's probability css selector not specific enough.

in order override other background-color property, new selector #navbar needs more specific other selector when targeting navbar element.

this can done including parent divs class/id in selector this:

.uk-container.uk-container-center.uk-margin-top #navbar {     background-color: black !important; } 

n.b. try adding above css property without !important tag first , if doesn't seem work, try adding above along !important tag.

---

regarding css specificity, read this:

https://developer.mozilla.org/en-us/docs/web/css/specificity