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

  • Resolved cbridges

    (@cbridges)


    11 years, 5 months ago

    Hi all,
    I am using the magazine basic theme. I have a child theme created and am using a child style.css file. This file imports the style.css from the parent and then I make any style changes I want in the child style.css. All of the changes are working except for the changes to the navigation menu. I am trying to change the color of the navigation menu, however the color keeps reverting back to the parent style.css. I copied the entire navigation area from the parent style.css to the child file so I made sure I had everything. Here is a link to my first page of the test site.

    I tried adding !important to the areas that I changed the color but that did not work either. I can’t figure out why the parent style.css is overriding my changes.

    Any help would be greatly appreciated. Thank You!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Theme Author bandicootmarketing

    (@tinkerpriest)

    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/

    Thread Starter cbridges

    (@cbridges)

    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. ]

    Theme Author bandicootmarketing

    (@tinkerpriest)

    What CSS selector are you using to change the color?

    Thread Starter cbridges

    (@cbridges)

    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

    Thread Starter cbridges

    (@cbridges)

    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.

    Thread Starter cbridges

    (@cbridges)

    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; ... }

    Thread Starter cbridges

    (@cbridges)

    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.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Part of child style.css being over-rode by parent’ is closed to new replies.