Custom my header on Whisper Theme

Store Design
, , ,

Topic summary

Goal: Customize the Whisper theme header and hero section.

Requested changes:

  • Announcement bar height ~40px; header height ~82px, both responsive to screen size.
  • Header should remain transparent at all times (currently red on load and turns transparent on scroll).
  • Move hero/slide copy from centered to left-aligned, matching the provided mockup.

Assets and access:

  • Live preview: https://mishmash.world/ (password: mishmash).
  • A reference screenshot was shared and is central to understanding the intended design.

Progress and attempts:

  • OP tried applying detailed guidance from another participant (@wilson_T) but couldn’t make it work for the header.
  • A helper requested email to obtain store access; OP sent details via direct message.
  • The helper reported the site wasn’t loading on their desktop.

Current status:

  • No working CSS/implementation posted yet; changes are not confirmed live.
  • Access issues may be blocking further help.
  • Discussion remains open pending either stable store access or concrete CSS steps to fix persistent transparency and text alignment.
Summarized with AI on December 13. AI used: gpt-5.
1

Hi Everyone,

I am looking to customize the header on my new website.

I would like to do the following:

  1. The announcement bar should be roughly 40 px deep and the header should be 82x deep *However this should be flexible for screen size
  2. The header at the moment is red when you land on the page - however, when I scroll it goes transparent, it should be transparent all the time - please see my ideal state in the image below

If you would also advise on how I move the copy from being central on the image to left aligned *as shown in the image below:

This is what I am aiming for:

Screenshot 2024-11-25 at 11.08.20.png
Screenshot 2024-11-25 at 11.08.20.png2100×1084 632 KB

This is where I am at: https://mishmash.world/?_ab=0&_fd=0&_sc=1

Thanks,

Mary

2

Hello,

Please share email for “Store URL”

Thanks!

3

https://mishmash.world/

4

I said, sent email address for store access.

5

I sent on message-did you get?

6

This is amazing detail @wilson_T However, I could not seem to make it work on the header

7

the password is mishmash

8

Your site is not working in my desktop.