I know this question has been asked before, and I've already referenced the following questions here:

Child Theme Not Overriding Parent Theme

some things in child theme css not overriding parent

CSS in child theme not overriding the parent theme [closed]

Function in Child Theme not overriding Parent Theme function [duplicate]

None of these address my particular issue.

The issue I am having is that the stylesheet for my parent theme isn't located in the traditional themedirectory/style.css. They did all the styling in themedirectory/assets/css/main.css. So I tried to create the child theme and added the following code to my functions.php file:

function my_theme_enqueue_styles() {

    $parent_style = 'maya-reloaded-style';
        wp_enqueue_style( $parent_style, get_template_directory_uri() . 'assets/css/main.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array( $parent_style ),
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

I updated the directory of the parent theme to the location of the current parent theme, but I still have an issue of my new stylesheet not overwriting the parent's child theme. It seems like the parent's stylesheet is being loaded after the child style sheet. When I inspect the element with Firefox it shows that the parent stylesheet is overwriting the child stylesheet.

What am I doing wrong and how can I fix this so the child stylesheet is loaded after the parent stylesheet?


Here is the PARENT (main.css) file:

Theme Name: Maya Reloaded
Description: Onepage, Multipage and Mutipurpose WP Theme
Theme URI: http://themeforest.net/user/unCommons/portfolio
Author: unCommons Team
Author URI: http://www.uncommons.pro
Version: 1.1
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: one-column, two-columns, right-sidebar, fluid-layout, custom-menu, editor-style, featured-images, post-formats, translation-ready

/* Main Style -> assets/css/main.css */

Here is the CHILD (style.css) file:

 Theme Name:   Maya Reloaded - Child
 Theme URI:    http:www.girlpowerhour.com/Maya-child
 Description:  Child theme for the Maya Reloaded theme
 Author:       Me
 Author URI:   http:www.virgsolutions.com
 Template:     maya-reloaded
 Version:      2.0.0
 License:      GNU General Public License v2 or later
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready, pink
 Text Domain:  maya-reloaded-child




/* Header */
.un-header-menu-white .main-menu  li  a{
  • Could you please share us the code in their style.css? The theme header should be there at least. – Mayeenul Islam Apr 12 '17 at 5:10
  • @MayeenulIslam I updated my question. – Blaine Apr 12 '17 at 5:17
  • #blaine did you check that the CHILD-THEME template name is correct – Mukii kumar Apr 12 '17 at 5:51
  • @Mukiikumar what do you mean? Can you be more specific? – Blaine Apr 12 '17 at 6:10
  • 1
    One more thing, in your function (my_theme_enqueue_styles) the line in which you are calling parent theme's main.css, on this line you have forgot to add slash(/) after get_template_directory_uri(). Means the path that you have mentioned assets/css/... must be start with slash like you did in the line in which you are calling child theme's style.css. – Rishabh Apr 12 '17 at 7:07

It is probably because the rules in their stylesheet have higher Specificity. add !important after one of your css rules and see if it works then.

You shouln't use !important unless you have to but it will tell us if it is the problem.

If it is, have a read of this article: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/


Try to use the following. In your add_action( ) call add the priority and tell if it solves the issue.

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 99 );

Your Answer

