Dawn theme header menu login button disappears on clicking hamburger menu

Store Design
, , , , , , , , , , , ,

Topic summary

A user reports a bug in the Dawn theme’s mobile view where the login button disappears when clicking the hamburger menu on the homepage, but remains visible on other pages after making the header transparent.

Proposed Solutions:

Two community members provided CSS fixes:

  • Solution 1: Add code to theme.liquid file (bottom, above </head> tag) using a media query targeting div#menu-drawer with height: 39vh for screens max-width 768px, conditional on index template

  • Solution 2: Add similar CSS code to theme.css or base.css file (bottom) with the same media query and height adjustment, marked as !important

Follow-up Question:

The original poster asks how to hide the transparent header section (logo, hamburger button part) but hasn’t confirmed if either solution resolved the login button visibility issue.

Status: Awaiting confirmation on whether the CSS fixes work and clarification on the additional hiding requirement.

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

I am using the latest version of the Dawn theme. I made the header transparent, but there is a bug in the mobile view. When the hamburger menu is clicked, the login button gets hidden. However, when navigating to other pages, the login button becomes visible when hamburger menu is clicked.

website : https://mannavan.myshopify.com/

password: offnorth

Screenshot 2024-12-05 150806.png
Screenshot 2024-12-05 150806.png424Ă—761 36.6 KB

Screenshot 2024-12-05 153030.png
Screenshot 2024-12-05 153030.png421Ă—752 11.8 KB

Thanks in advance

2

Hi @Sivadarshan

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
Step 2: Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
Step 3: Add the following code at the bottom of the file above tag

Here is the code for Step 3:

{% if template.name == "index"%}
{% style %}
@media screen and (max-width: 768px){
div#menu-drawer {
    height: 93vh;
}
}
{% endstyle %}
{% endif %}

image (6).png
image (6).png1305Ă—824 79.8 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

1 Like
3

Hi @Sivadarshan

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media screen and (max-width: 768px){
div#menu-drawer {
    height: 93vh !important;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

4

@DaisyVo Thanks for the code! But how to hide the transparent section (logo, hamburger button part)

5

Could u have a look at my latest post, i used this code but need a slight tweak if you could help