Change font size (menu drawer)

Hey, anyone know how to change font size for menu drawer (for mobile)? I want the font much smaller than now (attached image below), i know few apps but wanted to know if can be settled by custom code first.

Also want to add login and sign up button below (on the menu drawer)

Info : Above is mine while below is example of how i want it to be, also dont mind the nested sub menu, its fine, just the size and login, signup addition

Yes, this can usually be done with custom code instead of an app.

The menu drawer font size can be adjusted with CSS by targeting the drawer menu items, and adding Login and Sign Up buttons below the navigation is also possible by editing the theme’s menu drawer section (the exact file depends on your theme).

If you can share your theme name (for example, Dawn, Prestige, Impulse, etc.), I can point you to the correct file and code.

This can be done with custom code but you should also know that store theme differs

@veluxe1 to make border and font size changes, CSS can help, to add login and sign up buttons, we need to edit code a bit to do it WITHOUT an app.

Can you help me regarding the code? Theme : Horizon

@veluxe1 this is gpt created code, but it will work, you need to put this code into theme’s sidebar menu drawer template

{% if customer %}
  <a href="{{ routes.account_url }}" class="header-btn">
    My Account
  </a>
{% else %}
  <a href="{{ routes.account_login_url }}" class="header-btn login-btn">
    Login
  </a>

  <a href="{{ routes.account_register_url }}" class="header-btn signup-btn">
    Sign Up
  </a>
{% endif %}

Hi @veluxe1

Regarding the font size issue, can you simply share your store URL and password (if enabled) and I’ll point you to the right direction.

Also, regarding your other issue. You can try out the code suggested by suyash, if that doesn’t work then it needs to be custom coded within your theme files and for that I would require the collaborator access.

Best,
Moeed

Hi @veluxe1

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

pass : tkbytyra

i don’t know which file liquid to put the code from suyash

pass : tkbytyra

Hi @veluxe1

1. Reduce mobile menu drawer font size

Go to Online Store > Themes > Actions > Edit Code > Assets > base.css
Paste your CSS at the bottom of base.css and click Save

@media screen and (max-width: 749px) {
  .menu-drawer__menu-item--mainlist .menu-drawer__menu-item-text {
    font-size: 14px !important;
  }

  .menu-drawer__menu-item--child .menu-drawer__menu-item-text {
    font-size: 12px !important;
  }
}

You can lower it further (e.g. 12px / 10px) depending on the design you want.

2. Add Login / Sign Up buttons at bottom of drawer
You’ll need to edit the mobile drawer file — usually header-drawer.liquid or menu-drawer.liquid.

Add this near the bottom of the drawer markup:

<div class="mobile-auth-buttons">
  <a href="{{ routes.account_login_url }}" class="auth-btn login-btn">Login</a>
  <a href="{{ routes.account_register_url }}" class="auth-btn signup-btn">Sign Up</a>
</div>

Then add CSS:

.mobile-auth-buttons {
  display: flex;
  gap: 10px;
  padding: 20px;
}

.auth-btn {
  flex: 1;
  text-align: center;
  padding: 12px;
  border: 1px solid #000;
  text-decoration: none;
}

.signup-btn {
  background: #000;
  color: #fff;
}

Best regards,
Devcoder :laptop:

i cant find the exact place to paste this code

I think everything is good, i found the right place, but did you know how to make the button shape to rounded rectangle? for the edge

Hi @veluxe1

Add this css.

.auth-btn {
border-radius: 12px;
}

Hi @veluxe1

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts. :white_check_mark:

Best regards,
Devcoder :laptop: