Burger menu pushes the content when opened

Store Design
, , ,
1

I’m trying to create a slide-out effect where the burger menu pushes the rest of the website content to the right when opened.

Example website: https://tcbjeans.myshopify.com/

Thank you.

2

Hello @old_coat90

  1. Navigate to Online Store > Themes
  2. Click on Customize for your active theme
  3. Click on Edit Code
  4. Find and open the file: theme.scss.css and add this code at the end of the file
.js-drawer-open-left .page-container, .js-drawer-open-left .drawer__header-container {
    transform: unset !important;
}

.js-drawer-open-left {
    overflow: visible !important;
}
3

Hi @Lakshya_design ,

Thanks so much for you reply.

There’s no file called ‘theme.scss.css’. I tried base.css instead but it did not work.

I’m using Dawn 15.3.0.

4

Hey! @old_coat90 ,

Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

5

Hi @CodingFifty

Here you go:

https://raisedbywind.com

Pass: owneed

Thanks!

6

Paste this code into “Theme settings”=> “Custom CSS”:

main {
  transition: transform var(--duration-default) ease;
}
body:has(.menu-drawer-container.menu-opening) main {
  transform: translateX(40rem);
}
7

Worked! Thanks @tim_1 ., much appreciated!