How to Fix Transparent Header Overlapping other pages other than the homepage

[SankalpParekh]

I recently Created a sticky transparent header for my homepage to over lap the slideshow images for aesthetic reasons.

Now when I got to any other page it overlaps all the content and doesn’t like nice. Please help me fix this.

Attaching the link below. I would have to fix all the pages which is a nuisance. Is there a shorter way from coding that can fix this?

Or is there a way that the header can be transparent only on the Homepage and not any other pages?

For making the header transparent I used the following code.

On Base.css

header {

background-color: transparent;

position: fixed;

top: 0;

left: 0;

right: 0;

z-index: 999;

transition: background-color 0.1s ease-in-out;

}

On Theme.liquid before

[Moeed]

Hey @SankalpParekh
Kindly share your Store URL and Password if enabled

[ZestardTech]

Hello @SankalpParekh

To make the header transparent only on the homepage and not on other pages, you can modify your code as follows:

On Base.css, add a class to the header element on the homepage:

header.transparent {
  background-color: transparent;
}

On Theme.liquid, update your JavaScript code to add or remove the “transparent” class based on the current page:

document.addEventListener('DOMContentLoaded', function() {
  window.addEventListener('scroll', function() {
    var header = document.querySelector('header');
    if (window.scrollY > 100 && header.classList.contains('transparent')) {
      header.classList.remove('transparent');
    } else if (window.scrollY <= 100 && !header.classList.contains('transparent')) {
      header.classList.add('transparent');
    }
  });
});

Now, on the homepage, add the “transparent” class to the header element:

By doing this, the header will have a transparent background only on the homepage and will be solid on other pages.

[SankalpParekh]

Its open only

https://iguanabyswastiparekh.com/

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

main#MainContent {
margin-top: 6%!important;
}

[Moeed]

Hey @SankalpParekh

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above tag.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[SankalpParekh]

This is not working, please explain properly. Firstly where is the homepage coding? Theme.liquid?

Also let me try and explaining to you what I have. As of now I have a sticky transparent header then when scrolled down changes the the transparency to colour. Which I want on the home page.

On all the other pages I want I want to be sticky only but without the transparency.

[SankalpParekh]

This works but I changed the homepage transparency idea also. Please check the screenshot attached below.

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Layout > theme.liquid and paste this at the bottom of the file:

{% if template != 'index' %}
    
{% endif %}

[SankalpParekh]

Thanks for this,

what about the other problem? How to make sticky header coloured on other pages rather than the homepage?

I dont want to loose the transition of transparent to coloured on the homepage.

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Layout > theme.liquid and paste this at the bottom of the file:

{% if template != 'index' %}
    
{% endif %}

[SankalpParekh]

Thanks for the reply, It doesnt seem to work,

I want the transparency to be gone. Attaching a video of whast happening.

Its fading into the colour. I want remove the fading and transparency and make it sticky header sticking to one colour only.

[SankalpParekh]

Hello @ZestardTech this code works perfectly on Desktop, but doesnt now work well on the mobile.

I am attaching a screenshot of desktop and mobile both. Please check. Also attaching the page link used in the SS. https://iguanabyswastiparekh.com/pages/our-story

[SankalpParekh]

@ZestardTech Waiting for you reply.