Child theme looks different from parent theme, and incorrectly displays parts

Question

I've created a new Wordpress site using the Realistic theme. I added a logo, and this was the resulting webpage (ignore the sidebar):

I want the website title to be displayed next to the logo, for which I'd need to edit the header.php file. So, I created a child theme, and this is the result:

Note how the footer suddenly behaves like it should (how though? I'm fine with this, however). There's however suddenly a random menu button in the top-left corner (which should only be there in the mobile version of the site) and the menu button on posts is now placed incorrectly. The menu of that button pops up in its old spot though:

This is the content of the child theme's function.php:

<?php
//
// Recommended way to include parent theme styles.
//  (Please see http://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme)
//  
function theme_enqueue_styles() {
    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',


 get_stylesheet_directory_uri() . '/style.css',
        get_stylesheet_directory_uri() . '/css/fontello.css',
        get_stylesheet_directory_uri() . '/css/material-default.min.css',
        get_stylesheet_directory_uri() . '/css/material-style1.min.css',
        get_stylesheet_directory_uri() . '/css/material-style2.min.css',
        get_stylesheet_directory_uri() . '/css/material-style3.min.css',
        get_stylesheet_directory_uri() . '/css/material-style4.min.css',
        get_stylesheet_directory_uri() . '/css/material-style5.min.css',
        array( $parent_style )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
//
// Your code goes below
//

These are the contents of the child theme's style.css:

/*
 Theme Name:   Realistic Child
 Theme URI:    http://themient.com/themes/realistic
 Description:  Realistic Child Theme
 Author:       Asmi Khalil
 Author URI:   http://themient.com
 Template:     realistic
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Blue, Red, Purple, two-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-menu, editor-style, featured-images, microformats, post-formats, sticky-post, threaded-comments, translation-ready
 Text Domain:  realistic
*/

How can I fix this, preferably keeping the child theme's footer down below where it belongs?

Answer 1

I decided to work with the creator of the theme, and the problem has been fixed!

I did the following:

1. Remove all code from the child theme's function.php, leaving it empty.
2. Replaced the child theme's style.css with a copy of the parent theme's style.css, and replaced the commented bit with the child theme's commented bit.

This fixed all problems. Thanks to everyone for your help.

Answer 2

Are all of those style-sheets included from the parent theme?

If so? Try get_template_directory_uri() instead of get_stylesheet_directory_uri()

Rule of thumb: if the style sheet you're trying to enqueue is in your child theme directory use, get_stylesheet_directory_uri() if it is in the parent theme's directory use get_template_directory_uri()

Answer 3

It's quite possible that critical styles (and other elements, too) are being derived from other sources and locations than separate CSS files. Many "advanced" themes (and plug-ins) will do this kind of thing: It can be annoying for developers, but is often pursued for the sake of making customization easier for non-developers (who wouldn't be using child themes).

I'd recommend that you use Firebug, Inspect Element, or other tool to determine where the formatting is actually originating. The results will often show up as "element" styles. Other times they may (seem to) refer you to your installation's root directory. They may show up in the page source as sent directly to the header (between <style> tags). You might also find clues regarding an unexpected origin of the element itself.

You might also check your theme options page for indications as to where and how theme-specific styles are being set and sent. You may also have to delve into the theme's template structure if it uses a "tags" file.