Create unique header for homepage

Stu_1984
New Member
2 0 0

Hello,

I would like to have a unique header for my homepage.

I have created a header that sits over the homepage slideshow by changing the site-header css from position: relative; to position: absolute; then made the background have some transparency by adding opacity: 0.5;. When you hover over the header it turns to a solid colour. It works exactly how I want it to, for the homepage.

For all other pages I want the header to remain as position: relative; so it sits above any other items below and the background to be solid.

From a CSS perspective I’m ok to make the required changes but I’m struggling with the liquid code.

I’ve created a new section called ‘header-two’ so I now have ‘header’ and ‘header-two’ sections to give me a header for the homepage and a header-two for all other pages. 

To try and get the code to detect which page the user is on I’ve added an ,if / else statement to the  theme.liquid code using handles to detect the page. My expectation is that the if / else statement selects the right header for the page, but it doesn’t work.

At the moment the homepage is using ‘header’ correctly but all other pages appear to using both ‘header’ and ‘header-two’ which is also represented by the sections showing two headers in the customise panel.

I’ve seen some examples/solutions on here already but they just don’t work for me.

Any help would be greatly appreciated.

 

 

 

 

0 Likes
gina-gregory
Shopify Expert
644 37 140

Instead of having 2 different header sections, I would recommend just changing your CSS based on a class on the body.

<body class="template-{{ request.page_type | handle }}">

on the home page it will render as:
<body class="template-index">

 

If you really want to maintain 2 different headers, this should work in your theme.liquid file:

{% if template == 'index' %}
  {% section 'header' %}
{% else %}
  {% section 'header-two' %}
{% endif %}