Make sticky hamburger menu at the bottom of Shopify mobile | Dawn theme

Store Design
, , , ,

Topic summary

A user wants to implement a sticky hamburger menu at the bottom of the mobile view for a Shopify store using the Dawn theme, sharing a reference image of the desired design.

Initial Attempts:

  • Another user provided CSS code targeting button.btn.site-nav__thumb-button with position: static, but this didn’t achieve the desired result.
  • A second CSS snippet was offered but also failed to work.

Current Solution:

  • A more comprehensive CSS approach was suggested, involving:
    • Positioning header-drawer as fixed at the bottom with specific styling (white background, rounded corners, centered)
    • Targeting mobile screens (max-width: 989px)
    • Code to be added to base.css file in the theme assets

Status:

  • The discussion remains ongoing as the original poster hasn’t confirmed whether the latest solution works.
  • One respondent noted this is a “complicated request” requiring multiple steps and recommended hiring a professional, while offering a display-only code as a reference.
  • The site is currently unpublished, making real-time testing challenging.
Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have been seeing this hamburger menu design a lot lately for Shopify mobile and I would like to add this to a site I am customizing for a client. This is the desired result:

IMG_0547 2.jpg
IMG_0547 2.jpg1170Ă—2532 270 KB

Thank you!

1 Like
2

hey @arahming123 share the URLs of your website plz

3

hello,

The website is not published at the moment

4 
@media screen and (max-width: 767px) {
button.btn.site-nav__thumb-button.js-toggle-slide-nav {
    position: static !important;
 }
}

Mustafa_Ali_0-1744017754836.png
Mustafa_Ali_0-1744017754836.png300Ă—532 196 KB

hey @arahming123 follow the following steps plz

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

5

Hello,

That did not work for me. This is how the website is looking for mobile:

IMG_0549.PNG
IMG_0549.PNG1170Ă—2532 358 KB

1 Like
6

try again plz with this one

7

Still no luck. This is where I am placing it:

Screenshot 2025-04-07 at 4.22.02 AM.png
Screenshot 2025-04-07 at 4.22.02 AM.png2754Ă—1480 422 KB

8

Hi @arahming123 ,

It will be a complicated request and involve many steps, I recommend you hire a professional for it.

If just display, you can refer to the following code. Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 989px) {
    header-drawer {
        position: fixed;
        bottom: 2rem;
        z-index: 999;
        background: #ffffff;
        width: 80%;
        border-radius: 20px;
        left: 50%;
        transform: translateX(-50%);
    }
.menu-drawer-container {
    width: 100%;
    justify-content: center;
}
}