Child theme not working

All I get is a white page when I visit your site.

When you get your site back up, let’s focus on a specific issue. Your style.css file. If you add this into it:

body {
    border: 10px solid red !important;
}

Do you see a red border on your site?

Hi Andrew, it’s back up again and I do see a red border.

Cool, you can remove that CSS that I posted now (I’m sure you don’t want a giant red border on your site).

Now, which bit of CSS in your Child Theme style.css file isn’t working?

Thanks Andrew. I don’t think it’s the CSS that isn’t working. I can’t see any of my navigation bars (I had four – primary, secondary, mobile and social), so I think it is the header.php that isn’t working rather than the CSS.

Since my php and css code was working well when edited directly in the theme itself and I have simply copied over the code I was using then into my museum-child folder, I think it might be a question of how I am hooking in the child theme.

Start with a NEW unmodified copy of the parent theme header.php file in the child theme – see if it works that way.

If so, start making your changes one by one to find what is causing the problem.

Ditto, the CSS – comment out the code and add back one by one.

I have fixed it. It was actually very simple. I just didn’t realise that when you upload a new child theme it doesn’t remember the menu locations of the menus created, so I had to assign them all locations again and it works again.

But now that I have it working I can see that some of my CSS changes aren’t working properly within the child. This is CSS I wrote to change the background colour scheme for links on hover and focus.

.main-navigation li:hover a,
  color: white;
  background: #00c9c9;
}

.main-navigation li.focus > a,
.main-navigation li a:focus {
  color: white;
  background: #455353;
}

and this was the original code

.main-navigation li:hover a,
.main-navigation li.focus > a,
.main-navigation li a:focus {
  background: #2f2f2f;
}

Is there a reason why this wouldn’t work?

OK, your problem right now is that your child theme’s CSS has this rule in your media query starting at line 2381:

.menu-toggle,
  .main-navigation .primary-menu.toggled .nav-wrapper ul {
    display: none;
  }

Take out this rule and your mobile menu button should appear.

Thanks CrouchingBruin. I just removed it, but it has made no difference. I am still seeing both the mobile and the primary menus one after another in the responsive toggle menu for mobile.

Well, at least the menu button is now showing up. I’ll be back in a few hours to look at it some more, have to run a few errands.

I found a work around for the mobile menu. Since it was happily displaying two menus one after the other, I place the mobile menu after the primary menu and allocated the additional menu items missing from the primary menu into the mobile menu. It now shows as if it is one full menu.

I’m still struggling with the CSS for the hover over and focus navigation items though. For some reason I can edit the colour when the hover and focus are in the same list as per the original CSS below.

.main-navigation li:hover a,
.main-navigation li.focus > a,
.main-navigation li a:focus {
  background: #2f2f2f;
}

but the moment I try to specify different colour options (as below) for hover and focus by separating them out, neither of them work.

.main-navigation li:hover a,
  color: white;
  background: #00c9c9;
}

.main-navigation li.focus > a,
.main-navigation li a:focus {
  color: white;
  background: #455353;
}

I am also concerned that I keep getting the white screen even when all I’ve been editing is the CSS. It seems to turn up fairly randomly and then I have to remove all my child theme files and re-upload them before it works again. Any idea why this might be?

Thanks CrouchingBruin. The other thing that it would be great if I could do, but can’t work out how, is to spread the main menu items so that they remain evenly spaced but always fill the whole width of the white content area in line with the top navigation bars. Is there a way of making this happen?

The site isn’t coming up for some reason.

I know, but when I went to sleep last night it was showing up perfectly. I didn’t do anything to the code and come the morning it’s not showing any more.

This what I have put on the top of my child theme style.css.

/*
 Theme Name:   Museum Child
 Description:  My first child theme, based on Museum
 Author:       DidoH
 Template:     Museum
 Version:      1.0.0
 Tags:         one-column, responsive-layout, custom-menu, editor-style, featured-images, sticky-post, threaded-comments, translation-ready, photoblogging, black, red, white, light
 Text Domain:  museum-child
*/

/**
 * General CSS Helpers
 */
/* @group CSS Helpers */
/* @end */
/**
 * Style Helpers
 */
/* @group Style Helpers */
/* @end */

and this is what appears at the top of my functions.php

<?php
/**
 * Museum functions and definitions
 *
 * @package Museum
 */

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

if ( ! defined( 'MUSEUM_VERSION' ) ) {
	define( 'MUSEUM_VERSION', '0.1.7' );
}

In addition to these files I have uploaded edited versions of content-page.php, header.php, page.php and added the woocommerce.php below

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package Museum
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php woocommerce_content(); ?>

		</main><!-- #main -->
	</div><!-- #primary -->

<?php get_footer(); ?>

All of these files were working fine when edited directly to the museum theme and seem to work fine in the child them until they give up shortly after loading to display the white screen instead. How can I prevent this?

If I can’t prevent this I could work directly on the theme as before. I have a full back up of the code on my computer so if the theme had to be updated I could just re-upload. How often does the theme get updated and would it do it automatically or ask my permission first?

Happy to post the full files of my child theme if that would be helpful. Thanks.

I have now tried everything suggested in the support forum for the white screen of death, but nothing is helping. I have added define('WP_MEMORY_LIMIT', '96M'); to my wp-config.php, deactivated the only plugin I have added recently and replaced the functions.php with the original. The site is back up now and has been working for about 30 minutes, but I expect it will revert to the white screen again soon.