Fix header when overing or clicking menu back to BLACK

Store Design
, , , , ,

Topic summary

A Shopify store owner implemented a transparent header on Dawn 8.0 theme following a YouTube tutorial. While the solution works well on mobile, desktop issues emerged with the mega menu.

Core Problem:

  • When hovering over or clicking parent menu items on desktop, the header reverts to black instead of remaining transparent
  • The transparent effect works correctly on mobile

Proposed Solutions:
Two approaches were requested:

  1. Header returns to black on cursor hover over the header itself
  2. Header returns to black when hovering/clicking any parent menu items

Troubleshooting Attempts:

  • PageFly-Victor suggested custom code to be added before </body> in the theme.liquid file
  • Initial code caused positioning issues: logo shifted and search/account/cart icons moved to page edges
  • Alternative CSS solution was provided
  • User attempted a simpler CSS approach using .header#site-header:hover { background: black; } but encountered height-related issues when scrolling

Status: The discussion remains ongoing with no final resolution. The user is still experiencing layout and behavior problems with the suggested fixes.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have recently followed a tutorial video from youtube to make the header transparent on Dawn 8.0

https://www.youtube.com/watch?v=feuDG6igGDk&lc=Ugy-agV39tqeyE-Bxzd4AaABAg.9nMSRBGqWzc9nMh6IjGQUe

The code works great and perfectly on both desktop and mobile (mobile is GREAT), but I will need some fixing on DESKTOP because I am using the mega menu, and when the mega menu items are hovered/clicked and the menu opens, the header stays transparent. Please check the attached screenshots for reference.

transparent header.jpg
transparent header.jpg640Ɨ252 24.7 KB

normal header.jpg
normal header.jpg640Ɨ276 24.4 KB

If possible I would need one of these 2 solutions:

  1. The header goes back to BLACK as soon as the cursor hover on the header
  2. The header goes back to BLACK as soon as the cursor hover/clicks on any of the parent items of the menu (WOMEN/MEN/UNISEX)

Website: 1989streetwear.com
Password: bet1989

2

Hi @1989streetwear ,

This is Victor from PageFly - Landing page builder, Iā€™d like to suggest this idea for the 1 solution:

Step 1. Go to Online Store ā†’ Theme ā†’ Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

Hope my answer will help you.

Best regards,

Victor | PageFly

3

Hi @PageFly-Victor thank for you reply

this code kind of works but it changes the position of the logo and the search, account and cart icons to the edges of the page

Untitled.jpg
Untitled.jpg1912Ɨ927 120 KB

4

You can remove my previous code and try this code below:
1 Like
5

Thank you

I am using just this in my custom css file.

.header#site-header:hover {

background: black;

}

The height also plays with the header when you scroll down the page and you try to hover it.