Support » Theme: Twenty Seventeen » metaslider twentyseventeen header

  • Resolved cat5


    I have placed a metaslider on the front page of the twentyseventeen theme. I placed the correct code in the template-parts/header/header-image file. And all is working nicely.
    However when a navigation link is click on and the page appears, the slider is no longer behind the logo and site name (site-branding). I thought maybe I should have also put the code in the site-branding file or maybe in the header file but nothing works.
    Would appreciate some direction.
    Thank you!

Viewing 13 replies - 1 through 13 (of 13 total)
  • Hi @cat5,

    Can you share a link to the site or a screenshot better showing the issue?

    Hi @kbat82,
    Thank you for replying
    The site is under construction.

    Here’s a link to the screen shot. The images need to run behind the logo.

    The landing page is here. With the metaslider working

    If you link to the twentyseventeen theme you will see what I mean when you click on a top menu item.
    here’s the screen shot:

    Hi @cat5

    You might have to adjust this a bit, but if you add the MetaSlider code to this page it should replace the existing image.


    Replace this line with your MS code
    <?php the_custom_header_markup(); ?>
    <?php echo do_shortcode(‘[metaslider id=”xx”]’); ?>

    Does that make sense?

    Sorry for the delay @kbat82
    Yes, that is what I did originally and everything from Metaslider said that was the correct file.
    But I still get just the background color and no image.
    Do you think it might be a css issue?
    thank you for your help!

    Hi @cat5,

    I think I would have to see the site live at this point so I could check the source code and see exactly what’s going on. The slideshow should still load even if it’s in the wrong place. If you don’t want to share the link publicly you can send a message to our off-site support and just mention my name and someone will assign it to me (I code MetaSlider, by the way).

    Hi @kbat82
    Thank you. I will message you on metaslider’s support. The website is not ready to go live since some of the images still need to be purchased.
    very much appreciate your help.

    Hi @kbat82
    Doesn’t look like I can use that support form since I don’t have a Purchase id. I’m using the free version.

    • This reply was modified 5 months, 1 week ago by  cat5.
    You can see the site live now @kbat82

    Hi @cat5

    You should be able to get through the form without the purchase ID but it’s fine here as well. Basically WP 2017 theme only has the large header on the front page. That’s not a bug but is a feature (by design). However, if you want to override that functionality, you can probably just fake the theme stylesheet into thinking you’re on the front page on every page.

    Add this to functions.php file:

    add_filter( 'body_class', function ($classes) {
    	if (!is_front_page()) {
    		$classes[] = 'twentyseventeen-front-page'
    		$classes[] = 'has-header-image';	
    	return $classes;

    And if you have a large gap, you might need to additionally add this to a custom stylesheet somewhere (maybe use a plugin to add CSS styles)

    .single-featured-image-header {
        position: relative;

    Hi @kbat82
    thanks for the code. It does change the dynamic slide up of the links which is what is attractive about the twentyseventeen theme. Now when you click on the menu links the user can’t see new page. So it looks like nothing has happened. When you scroll down you see you are on a new page.

    Hi @cat5,

    That’s right. you would need to customize the rest to match the design and functionality you want to achieve. For example, you could add styling to the navigation to show the user which page you’re on, or you could load in a different slideshow too. Let me know if you have any more questions.

    Hi @kbat82

    I did fix it. We don’t want to change the functionality of the theme with regards to the front-page or the dynamic function of the navigation.
    I changed the code in the header-image file rather than replace it as you suggested and the metaslider instructions tell you to do. I kept the custom_header_markup and added the echo out the shortcode.

         <?php the_custom_header_markup(); 
    		   echo do_shortcode('[metaslider id="448"]');}

    Thank you for taking the time to help me!

    Hi @cat5,

    Great you got it working how you want now! Also, if you need to restrict the slideshow to only the homepage you can add the restrict_to=”home” attribute to the shortcode:

    echo do_shortcode(‘[metaslider restrict_to=”home” id=”448″]’);

Viewing 13 replies - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.