Can I customize the menu drawers on my website?

Hello!

Is it possible to design / customize the menu drawer, to look somehing like this?
The example below is used from the website mudwtr.com

Instead of the default:

Hi @izy1 ,

Just like to clear, you like to change the back ground? or the font style? please specify. Thanks!

Yeah my bad!

I want to change the font style, by changing the font size and padding between my pages in the drawer.

Thank you for the clarification. Try this one.

li.tw-text-base.tw-mt-2 {
    padding: 5px 0 5px 0;
    font-size: 20px;
}

Result:

You can increase or decrease thie size of paddign and font.

I hope it help.

Where should I put the code? Custom CSS or do I need to edit the code?

Oh sorry I forgot to insert the instruction.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.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:
  4. And Save.

No worries! :slightly_smiling_face:
That did unfortunately nothing.

Hi there, The code didnt works?

If doesnt work try another one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css, 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:
  4. And Save.
ul.abtest_navigation__control.tw-overflow-auto.tw-pt-20.tw-bg-white.tw-w-navigation.tw-h-full.tw-text-black.tw-p-8.tw-text-3xl.tw-font-sans li.tw-text-base.tw-mt-2 {
    font-size: 30px;
    padding: 5px 0 5px 0;
}
ul.abtest_navigation__control.tw-overflow-auto.tw-pt-20.tw-bg-white.tw-w-navigation.tw-h-full.tw-text-black.tw-p-8.tw-text-3xl.tw-font-sans li.tw-text-base.tw-mt-12 {
    font-size: 30px;
}

Result: