Public Ticket #1170778
How to override actions (for intro-container images)/font for child theme?


  •  2
    design_dolphin started the conversation


    Had the following questions which I can't seem to solve and hope you can help or point in the right direction please?

    1. How do I use the same intro-container image for all pages (posts, archives, home). Right now I have a CSS override which works, but now it loads two pictures on some pages (e.g. posts). I tried to extend the class or override action form the parent theme, but I can't get it to work. What I want to do is set one background image, either in customization or in PHP/ CSS, and not have an e.g. posts featured image injected into inline CSS please.

    2. Override Jquery/responsive menu. Is it possible to just have the menu as links? The site uses a small menu, so while beautiful the responsive menu is making things more complicated for this site. At some point I would like to maybe use no Jquery on some pages, although I don't know if this is possible with the accessible menu JS calls.

    3.  How not to use Google fonts, but just CSS fonts? E.g. no fonts.googleapis.com calls (which seem to get a 404?)

    Kind regards,


  •  36
    Oliver replied


    1. You can force the Appearance > Customize > Header image with this code in your child theme's functions.php file:

      function child_theme_intro_image( $image_url ) {
          return get_header_image();
      add_filter( 'wmhook_monument_valley_intro_background_image_url', 'child_theme_intro_image', 100 );
    2. Actually, the /assets/js/scripts-navigation.js file controls not only mobile navigation, but also the navigation accessibility. However, the mobile navigation control is really just a basic one, applying and altering classes. So you should be able to override the mobile navigation with custom CSS as all the magic happens there mainly. Try something like this to get you started (and also read Using browser code inspector article to determine the correct custom CSS to use):

      @media only screen and (max-width: 54.9375em) {
          .main-navigation-container {
              position: relative;
              width: auto;
              height: auto;
              background: transparent;
              color: inherit;
              border-color: inherit;
              border-radius: 0;
              opacity: 1;
              -webkit-transform: none;
              -ms-transform: none;
              transform: none;
          .main-navigation-container .menu > ul {
              max-width: none;
              padding: 0;
              margin: 0;
          .main-navigation-container li {
              float: left;

      I might actually introduce a theme option to disable responsive menu in the future update.

    3. Actually, thank you, you have found a theme bug. The Google Fonts should not load when you set your custom fonts in Appearance > Customize > Theme Options > Typography. To fix this you can either rename the "typography_load_fonts" text in /includes/setup/class-setup.php file to "typography_custom_fonts" or use this code in your child theme's functions.php file:

      function child_theme_google_fonts_off( $pre ) {
          return '';
      add_filter( 'wmhook_monument_valley_assets_google_fonts_url_pre', 'child_theme_google_fonts_off' );

    Best regards,

    Oliver Juhas
    WebMan Design