0

So I was tasked with removing a banner on a certain page in a custom WordPress theme. I assumed of course that in removing this banner it would move everything up. Sure enough there is an H1 element that moved up. I was going to start manipulating the css, but the css is the same as the other pages where there was no banner to remove. The H1 css for those pages are the same.

This is the css:

.page-intro h1 {
    padding: 20px 5% 10px;
    color: #fff;
    margin: 0 auto;
    max-width: 1140px;
}

For both the page-warranty-registration.php file and the single-innovations.php file. But the single-innovations.php file had a banner that I removed:

<div id="post-page">

  <?php get_template_part( 'template-parts/content', 'page-banner' ); ?>

  <?php if( get_field( 'product_video' ) ): ?>
    <div id="video-header" class="full-video">
      <iframe id="player" type="text/html" width="640" height="390" src="<?php the_field( 'product_video' ); ?>?enablejsapi=1&amp;rel=0;" frameborder="0" allowfullscreen></iframe>
      <div onClick="closeVideo()" class="close-video">
        <p>Close</p>
      </div>

    </div>
  <?php endif; ?>

In removing the above code, it caused the H1 element to move up and hide behind the navbar in the single-innovations.php file:

<?php get_header(); ?>


  <?php get_template_part( 'template-parts/content', 'page-intro' ); ?>

  <main class="subpage-content">
    <div class="medium-wrapper">

      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

        <div class="innovation-information">
          <?php the_field( 'innovation_information' ); ?>
        </div>

      <?php endwhile; else : ?>

        <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>

      <?php endif; ?>

    </div>
  </div>
</div>

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player1;
  var player2;
  function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('player', {
      height: '390',
      width: '640',
      playerVars: { 'controls': 0, 'rel': 0 },
      events: {
        'onReady': function(event) {
          onPlayerReady(event, 'player')},
        'onStateChange': onPlayerStateChange
      }

But the css for that H1 element is the same as the page-warranty-registration.php that never had a product-video page-banner. So I am not sure if I should just go ahead and manipulate the css in single-innovation.php or if there is a more simple way to resolve this without altering the original code. Any suggestions?

So HERE is the URL of where the issue lies, and HERE is the URL of the page that looks the way its supposed to look.

2
  • Do you have a url where the issue resides? Apr 7, 2017 at 4:53
  • @NathanielFlick, I just added the urls.
    – Daniel
    Apr 7, 2017 at 12:48

1 Answer 1

1

CSS might be the same, but in the 2nd link, your title is wrapped in a DIV as following:

<div id="page-top" class="warranty-registration-page content-area">
</div>

This element has a margin-top property with a value of 75px. This is why it is visible.

Either wrap your title inside the following DIV, or add a CSS property for your title as margin-top:75px.

The template you might want to change is located at templates/content-page-banner.php and templates/content-page-intro.php.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.