Part of child style.css being over-rode by parent

Some CSS may require the use of the !important declaration. You can read about it here: https://bavotasan.com/2009/how-to-use-the-important-declaration-in-css/

Thanks for your reply. I have tried using the !important declaration but it doesn’t seem be working. Below is the code for the site navigation that I copied from the parent theme and changed in my custom css (using important declaration). When viewing the site using Chrome’s element inspector, I can copy the code below and put it into the element inspector and the navigation color changes as it should. However, when viewing my test site normally, the navigation menu colors are the default black. Could you glance at the code below and see if you see anything? I didn’t actually link the site above so here is a link test site
Thank you!

[ 304 lines of CSS moderated. Please just post a link to your CSS directly. ]

What CSS selector are you using to change the color?

I am using the following selectors. Along with the following I also have copied the rest of the main navigation CSS but these are the ones I have changed.

#site-navigation,
#site-sub-navigation {
	background: #2d4262 !important;
	}
#site-navigation li:hover {
	background: #456596 !Important;
	}
#site-navigation ul ul,
#site-sub-navigation ul ul {
	background: #2d4262 important;
	}
#site-sub-navigation li li:hover {
         background: #2d4262 !Important;
	}

Thanks

Try not to capitalize the “!important” CSS declaration.
See ‘!important’ rules on W3C

I removed the capitals and that still didn’t work. I have no idea whats going on. I can’t figure out why I can change it in google’s element inspector using this code but not in my theme itself.

After doing some more looking….it appears that any changes I would like to make to the child style.css are being over rode by the parent if the same selector is in the parent style.css. If I am adding new or unique selectors to the child style.css (say to change a plugin appearance), those work. However, if the same selector is in the parent and child (e.g, #site-sub-navigation{} or .widget {} ), the parent selector seems to take precedence. I noticed this because I tried to change the background color of the .widget {} selector so I created the same selector in my child style.css and made the changes, however the background did not change.
Thanks!

I have tested your CSS code on your child theme – /wp-content/themes/magazine-basic-child/style.css – and it was just fine. I don’t see any problem there.

#site-navigation, #site-sub-navigation {
    background: #2d4262;
}
#site-navigation li:hover {
    background: #456596;
}
#site-navigation ul ul, #site-sub-navigation ul ul {
    background: #2d4262;
}
#site-sub-navigation li li:hover {
    background: #2d4262;
}

No “!important” declaration needed. Your child style.css is overwriting the MB style.css
Check for other issues, like this double hash ##:
.blue {background-color: ##00688B; ... }

Gilbert,
Thank you very much! I reviewed the css again (for about the 3rd time:) I have been overlooking the closing } after my last column shortcode css. This is listed just prior to my code for the navigation menu and was causing all of the problems.
Thanks everyone for the help! I am new to WordPress so I’m sure I will be back with more questions.

it does not work for me on my blog myDragooN. Is anyone can tell me where it comes from.
thank you very much.