CODEWITHSUNDEEP
phphtmlwordpress
T.Doe
T.Doe

Reputation: 2035

WordPress - how to remove a header overlay

I'm using the landscape theme (https://en-gb.wordpress.org/themes/landscape/) for my WordPress website. The problem is that the header overlay image is attached to the nav bar menu, when all I need is the nave bar menu. It's fine on the home page but it comes up on every other page as well which is unnecessary.

I attempted to use an if condition:

<?php if (is_home()) { ?>
  <div class="header-overlay">
    <div class="site-branding">
      <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
      <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        </div>
    </div>
<?php } ?>

But that didn't work.

How can I remove it from the code?

header.php:

<body <?php body_class(); ?>>
  <div id="page" class="hfeed site">

  <div class="site-branding">
    <a href="http://localhost/abba_property_services/"><img src="http://localhost/abba_property_services/wp-content/uploads/2017/03/ABBA-Solutions-White-Background-1.png"></a>
  </div>
  <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'landscape' ); ?></a>

  <header id="masthead" class="site-header" role="banner">
    <nav role="navigation" class="site-navigation main-navigation">
        <h1 class="assistive-text"><?php _e( 'Menu', 'landscape' ); ?></h1>

        <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    </nav><!-- .site-navigation .main-navigation -->

    <div class="header-overlay">
        <div class="site-branding">
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        </div>
    </div>
    </div>
</header>

enter image description here

Upvotes: 1

Views: 1657

Answers (2)

Cedon
Cedon

Reputation: 627

The image background call is actually in the #masthead rule but it's hooked into the customizer so you can remove it from there easily enough. Problem is the space will still be taken up so you will need to do some tweaking to the CSS to make it so it's only defined on the homepage using the .home class.'

Upvotes: 0

Kasia
Kasia

Reputation: 24

add 

<header <?php if (is_home()) { echo 'id="masthead"'; }?>class="site-header" role="banner">

change css 

.site-header {
height: auto;
}
.home .site-header {
height: 40.625rem;
}

Upvotes: 1

Related Questions