How can I change Sticky Transparent header to colour when hovering my mouse over it?

[SankalpParekh]

Hello,

I am using a sticky transparent header that changes to colour when scrolling. I also want the header to change to colour when I lay my mouse over it. Also i want there Sticky transparent header only on the homepage and not on any other pages. All the other pages I want a sticky Coloured header. PLEASE HELP ME.

My website links is https://iguanabyswastiparekh.com/

I am using the following codes.

On base.css


On theme.liquid before closing of head


[webwondersco]

@SankalpParekh , Please add the below JavaScript in theme.liquid file just before the closing of tag.

this is the solution for the mouse over on header.

will check for the other problem and give the solution for that too.

[SankalpParekh]

This works,

Waiting for the other solution also.

[webwondersco]

@SankalpParekh , Please follow below steps:

• open your theme.liquid file and add below code in your body tag class element. just like below screenshot.

template-{{template}}

And after that Add below code of CSS at the end of your base.css file.

body:not(.template-index) .header{
  background-color:green;
}

Change the color as per your taste.