Keep header image at top of all pages

Hi All,

I am looking to keep the header image that is on the homepage across all of the pages in my site. Would anyone know if that is possible? Ideally I would not want it on the product pages.

Thanks

Hello there,

Thank you for contacting us about our theme Leto. I am happy to help with your queries.

To retain the main header image on non-home pages, try adding this PHP snippet to your child theme’s functions.

    /**
     * Hero area for non-homepage
     */
    function leto_hero_slider_nonhomepage() {

    	if ( !is_front_page() ) {
        echo '<div class="hero-area">';
    	   the_custom_header_markup();
    	  echo '</div>';
      }
      		
    }
    add_action( 'leto_after_header', 'leto_hero_slider_nonhomepage' );

If you don’t have a child theme, you will use an extra plugin that allows you to add functions to your site, like Code Snippets.

Once the plugin activated, you will see a new admin menu in the left side that reads “Snippet”. Add new snippet from this menu and insert the code above. Ensure the snippet is runnin on the frontend. Save and activate snippet.

Then add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    body:not(.home) #masthead.site-header {
      background-color: transparent;
      position: absolute;
      width: 100%;
      z-index: 998;
      top: 0;
      left: 0;
      background-color: transparent;
      -webkit-transition: background-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition: background-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);  
    }

I hope this reply helps. Let me know your views.

Regards,
Kharis
aThemes Support

Thank you for your time and effort, that works :slight_smile:
It is much appreciated.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support

Hi!
Is there a why that I can keep the Hero Area in the shop page but show a differente image than in home page?

Hi,

I made a plugin for this. You can download it from this Github repository.

I hope you find the plugin helpful.

Regards,
Kharis
aThemes Support

Thanks for the fast reply with an excellent answer.
Ayway I installed the plugin and uploaded the image to the Shop, but it still shows me the same image that is set in the Home Page.

Hi,

Thank you for trying. Perhaps you have a cache that needs to be flushed after doing changes on your site.

Adding, I request you share a link to your website here, so I can check it directly.

Regards,
Kharis
aThemes Support

Hey! I tried cleaning the page cache, but nothing changed.
The page url is https://ho-oponopono.com.ar or https://ho-oponopono.com.ar/tienda/ (shop page).


In the picture above you can see that I set an image but in the page it shows a different one.

Hey! Sorry to insist, but I was checking the page code and it seems that the Shop header and Homepage header has the same ID.

I don’t know how to change the header HTML code that is shown to display different content in the two pages.

Hi,

Thank you for updating me along with the screenshot.

Can you confirm whether you are running the latest versions of WordPress and WooCommerce?

Regards,
Kharis
aThemes Support

Hi!
Neither the Woocommerce or Wordpress version was the latest. So I updated them, cleared the cache and the Shop Header remains the same. I even tried deleting the Hero Image and uploading it again after the previous check, but no changes.

Hi,

I’d like to check directly from your website’s dashboard, so I sent you a direct message and requested admin access to your website. Let me know if you haven’t yet received the message.

Regards,
Kharis
aThemes Support