Move Burger Menu to Top Left Corner in Mobile

Store Design
, , , ,
1

Hello,

I’ve been trying to move the burger menu to the top left corner, so it aligns with the cart icon (see image below).

I’m able to do it with the inspect tool but not when i add it to my CSS liquid. I can’t seem to find the right class. Can someone please help?

Screen Shot 2023-10-14 at 8.23.02 PM.png
Screen Shot 2023-10-14 at 8.23.02 PM.png800×1936 248 KB

http://ad6568.myshopify.com

PW: bananarama123

1 Like
2

I think you can try changing a theme, it will save a lot of trouble.

3

Hi @hellocc

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.container.content.header-container {
    flex-direction: column-reverse;
}
.slicknav_menu {
    position: absolute;
    bottom: 20px;
}
}
4

Hi @hellocc [email removed]
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Move Burger Menu To Top Left Corner In Mobile, let’s try this solution:
Online Store ->Theme ->Edit code
Assets → styles.css

@media only screen and (max-width: 767px){
.header-container {
    display: flex !important;
    flex-direction: column-reverse !important;
}
.slicknav_menu a.slicknav_btn {
    position: absolute !important;
    top: -56px !important;
}
}

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

5

Hi @Made4uo-Ribe ,

Than you so much for responding! I tried but it didn’t budge…

It works in the Inspect tool but not when I apply the code in my theme CSS file (styles.css.liquid in my theme).

Would you have any other ideas? Thank you!!

1 Like
6

Hi Theodore,

Thank you so much for trying to help!

I tried but unfortunately didn’t work… It works with Inspector perfectly but not when applied to CSS file.

7

Hi @uiooo ,

Thank you for responding. Unfortunately, that’s not a good solution for me at this point.

8

Would you mind to cange it into other folder, paste it on the theme.liquid folder.

Paste this one before the

Like this.

Made4uoRibe_0-1697392518545.png
Made4uoRibe_0-1697392518545.png421×287 8.66 KB

And Save then refresh store. Thanks!

1 Like
9

That worked! Thank you so much!!

I have one more question, if you don’t mind…

Now the drop down menu appears to be out of frame.

I tried applying the code below but again it didn’t work in the CSS style folder.

In order to do that, should that or similar code be added to the theme.liquid as well?

I also want to make the background white, so you don’t see the home page below the menu.

Thank you so much again!

@media only screen and (max-width: 749px)
#nav.nav-align--center ul, #mobile_nav.nav-align--center ul {
    text-align: left;
    margin-bottom: -80px;
}