header Logo not entirely clickable

Shopify Discussion

Topic summary

A Shopify store owner using the Dawn theme reports that their header logo is only clickable on its top and bottom edges, not in the center—but only on desktop, not mobile.

Proposed Solution:

  • A CSS fix was suggested: adding z-index: 50 !important; to h1.header__heading via Theme Settings > Custom CSS.

Remaining Issues:

  • The code partially resolves the logo clickability but creates new problems:
    • Menu items adjacent to the logo (left and right) are now not fully clickable, especially letters near the logo.
    • The fix only works on the homepage, not on other pages throughout the site.

Status: The issue remains unresolved and requires a more comprehensive solution that works site-wide without affecting menu navigation.

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

Hi,

My logo in the header is not entirely clickable. It’s clickable only on the top edge and bottom edge of the circle. I want the entire logo to be clickable. even the centre. This issue is only happening on the desktop not on the mobile.

www.slidein.co.in

i’m using the dawn theme.

2

Hi @slidein_india

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
h1.header__heading {
    z-index: 50 !important;
}

I hope this helps

Best,

Daisy

3

Hi DaisyVo,

It has partially solved it but not entirely as the given code solves the logo being clickable but the menu item to the left and right of the logo are not entirely clickable…especially the letters that are closer to the logo.

4

Also, this code only works for the logo on the homepage and not on every page within the website.

5

works perfectly but again, only on the homepage. How do I make it work on every page within the website?