How can I create alternative headers for different pages on my website?

On my homepage, my header uses a white logo and white text for the menu options, on a transparent background. But on all my other pages, I use a white background. So I want to create a different header with all the same content but in black (that is, the black version of my logo and black text for menu options). I saw in other posts people saying to use

{% if template == ‘non-homepage’ %}

{% section ‘header1’ %}

{% else %}

{% section ‘header’ %}

{% endif %}

but I do not know where and how to use this snippet.

Again, I want to keep the header for the homepage, but create a black on white version of it for all other pages

My website is www.mymotherland.store

Hi @designedbymg

Dan here from Ryviu: Product Reviews @& QA app.

Your store already have black header on other pages.

I am trying to make it white header with black text and logo. (while the homepage header remains transparent with white text and logo)

Give me the black logo version link please

Or you can add this code to your theme.liquid file after to make your other page like this

{% if template != 'index' %}

{% endif %}

2 Likes

Thank you!

Instead of putting black background behind the logo, I used filter: invert(1) to turn the logo itself black. Saves the hassle from uploading a whole other png and linking that png to the logo when the background is white.

1 Like

You are very welcome!