Mobile Menu and Cart Don't Cover Full Screen

Store Design
, , , ,

Topic summary

Mobile menu and cart overlays on a Shopify store stop covering the full screen on mobile after a custom announcement banner was added to the header. The bottom portion of the screen remains visible instead of being fully overlaid.

  • Scope and context: Tagged as CSS/design/shopify-themes troubleshooting, suggesting a layout/CSS interaction with the announcement bar. The issue affects both the mobile navigation menu and the cart drawer/overlay.

  • Evidence: A screenshot was attached showing the uncovered bottom area. A Shopify preview link and password were provided to reproduce and inspect the problem.

  • Request: The poster wants the menu and cart to naturally cover the entire mobile viewport again and asks for help to fix the issue.

  • Current status: No solutions or workarounds have been proposed yet. The discussion is open and unresolved, pending guidance or code/CSS adjustments.

Summarized with AI on November 25. AI used: gpt-5.
1

Hi!

I have a custom announcement banner in my header, but ever since activating it, the mobile’s menu and cart do not cover the full screen, but instead they leave the bottom uncovered.

See image attached:

Screenshot 2025-11-25 at 20.29.36
Screenshot 2025-11-25 at 20.29.36746×1752 25.3 KB

As you can see the bottom part is not covered, and the same happens with the cart.

I would like to fix this issue and have the cart and menu covering the full screen naturally

This is my website: https://imy8vnkl5u0a79p7-60150284501.shopifypreview.com and the password is y22

I would appreciate any help!

2

Because theme has rule like this:

.drawer-menu__panel{
  position:absolute;
  top:0;
  left:0;
  display:flex;
  flex-direction:column;
  width:100vw;
  height:calc(100 * var(--vh) - 0);
  height:calc(100 * var(--vh) - var(--announcement-height, 0));
  .  .  .

So it kinda expects the announcement bar to be stuck at the top of the screen and menu to be below it. As it does in an unmodified theme.

Since your announcement bar is no longer sticky,
You can add a rule like this at the bottom of the theme.css

.drawer-menu__panel{
  height:calc(100 * var(--vh) );
}

Or this can go anywhere, like “Theme settings”=> “Custom CSS”, will do the same

.drawer-menu__panel {
  --announcement-height: 0px;
}
1 Like
3

I completely understand why this is frustrating. Everything was working fine until you added your custom announcement banner , and suddenly your mobile menu and cart no longer cover the whole screen. You get that awkward empty space at the bottom, and it just doesn’t feel clean or professional.

The good news?
You didn’t break anything.
This happens all the time when adding custom banners or fixed elements to Shopify headers.

5

Thanks for your help! It works :laughing:

1 Like
6

Thanks for your amazing message, it fixed my problem! :laughing:

1 Like