Can I customize the menu drawers on my website?

Store Design
, ,
1

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

izy1_0-1688925709992.png
izy1_0-1688925709992.png399Ă—676 21.1 KB

Instead of the default:

izy1_1-1688925751652.png
izy1_1-1688925751652.png447Ă—531 4.85 KB

2

Hi @izy1 ,

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

3

Yeah my bad!

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

4

Thank you for the clarification. Try this one.

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

Result:

Ribe_Dagandara_0-1688929598966.png
Ribe_Dagandara_0-1688929598966.png359Ă—436 13.3 KB

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

I hope it help.

5

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

6

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.
7

No worries! :slightly_smiling_face:
That did unfortunately nothing.

8

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:

Ribe_Dagandara_0-1688992054928.png
Ribe_Dagandara_0-1688992054928.png609Ă—622 30.5 KB