DidoH

Thansk WPYogi. I have just done that. The site is currently still working.

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 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?

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?

Hi CrouchingBrain, I found a work around to make the javascript overlook my top navigation bars so that only the bottom two navigation bars appeared in the responsive mobile menu. I did this by changing the role from “navigation” and the nav-id from “site-navigation” of the top navigation bars.

<nav id="secondary-site-navigation" class="main-navigation" role="secondary">
		<div class="nav-wrapper <?php museum_menu_class(); ?>">
			<?php
				wp_nav_menu( array(
					'theme_location'  => 'secondary',
					'container_class' => 'secondary-menu'
				) );

                wp_nav_menu( array(
					'theme_location'  => 'social',
					'container_class' => 'social-menu',
					'fallback_cb' => false
				) );
			?>
		</div>

I was then trying to make the primary menu disappear in the responsive menu so that only the mobile menu appeared. I tried the following, but nothing worked. The primary menu was still appearing.

/* =Responsive
----------------------------------------------- */
@media screen and (min-width: 600px) {

	.main-navigation .mobile-menu {
		display: none;
	}

}

@media screen and (max-width: 1000px) {
  body.blog .entry-title:after,
  body.archive .entry-title:after {
    content: ' \203A';
  }
  body.blog .entry-excerpt,
  body.archive .entry-excerpt {
    display: none;
  }
}
@media screen and (max-width: 800px) {
  body.single .hentry,
  body.page .hentry,
  body.search-results .site-main,
  body.search-no-results .site-main,
  body.error404 .site-main,
  .comments-area,
  .single .navigation,
  .page .navigation {
    margin-right: 40px;
    margin-left: 40px;
  }
}
@media screen and (max-width: 700px) {
  body.blog .no-image:before,
  body.archive .no-image:before {
    padding-top: 0;
  }
  body.blog .no-image .post-link,
  body.archive .no-image .post-link,
  body.blog .no-image .entry-header,
  body.archive .no-image .entry-header {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
  }
}
@media screen and (max-width: 500px) {
  body.single .hentry,
  body.page .hentry,
  body.search-results .site-main,
  body.search-no-results .site-main,
  body.error404 .site-main,
  .comments-area,
  .single .navigation,
  .page .navigation {
    margin-right: 0px;
    margin-left: 0px;
  }

  .main-navigation .secondary-menu,
  .main-navigation .social-menu {
    display: none;
  }

  .main-navigation .primary-menu {
    display: none;
  }

  .main-navigation .mobile-menu {
    display: block;
  } 

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

  body.blog .with-image:hover .entry-header,
  body.archive .with-image:hover .entry-header {
    opacity: 0;
  }
  .entry-title {
    font-size: 22px;
    font-size: 1.375rem;
  }
  .entry-excerpt,
  .read-more {
    display: none !important;
  }
  .comment ul.children {
    margin-left: 10px;
  }
  .two-column .sidebar {
    float: none;
    width: 100%;
  }
}
@media screen and (max-width: 400px) {
  .site-content,
  .secondary-content {
    padding-right: 20px;
    padding-left: 20px;
  }
  body.blog .hentry,
  body.archive .hentry {
    margin-top: 20px;
    margin-bottom: 20px;
    width: calc(50% - 10px);
  }
  body.blog .hentry .entry-header,
  body.archive .hentry .entry-header {
    padding: 10px;
  }
  .alignright,
  .alignleft {
    display: block;
    float: none;
    width: 100% !important;
    margin-left: 0;
    margin-right: 0;
  }
  .entry-meta .entry-author {
    margin-bottom: 10px;
  }
  .entry-meta .entry-author,
  .entry-meta .entry-taxes {
    display: block;
    float: none;
    max-width: 100%;
    text-align: left;
  }
  .entry-meta .entry-categories,
  .entry-meta .entry-tags {
    display: block;
    margin-bottom: 10px;
  }
  .entry-meta .entry-categories .genericon,
  .entry-meta .entry-tags .genericon {
    margin-left: 0;
  }
  .comments-title,
  .comment-reply-title {
    font-size: 22px;
    font-size: 1.375rem;
  }
}

and in my header.php

<nav id="site-navigation" class="main-navigation" role="navigation">
		<button class="menu-toggle"><?php _e( 'Menu', 'museum' ); ?></button>
		<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'museum' ); ?></a>
		<div class="nav-wrapper <?php museum_menu_class(); ?>">
			<?php
				wp_nav_menu( array(
					'theme_location'  => 'mobile',
					'container_class' => 'mobile-menu',
					'fallback_cb' => false
				) );
			?>
        </div>
            <nav id="primary-site-navigation" class="main-navigation" role="primary">
		<div class="nav-wrapper <?php museum_menu_class(); ?>">
			<?php
				wp_nav_menu( array(
					'theme_location'  => 'primary',
					'container_class' => 'primary-menu'
				) );
			?>
		</div>

Do you have any suggestions?

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

Hi WPYogi, I just created a child theme version of it and my adapted header.php isn’t working on the child theme. Do I need to add any code at the top to make it appear? Does it matter if the parent theme still includes my changes even though it isn’t activated?