Expand mobile menu in the Kofe theme

Store Design
1

Does anyone know how I can make my mobile menu full? Either by enlarging the font or shortening the menu, so there isn’t so much space? I’m using the Kofe theme.

Screenshot 2025-10-26 003640
Screenshot 2025-10-26 003640405×615 11.5 KB

2

@meggriffin can you please share this page link?

3

OKAY
Go to Online Store → Themes → Customize → Theme settings → Additional CSS, then paste this

@media only screen and (max-width: 768px) {
  .mobile-menu-selector { /* replace with your actual selector */
    font-size: 18px; /* try 18px or 20px */
4

  • Always duplicate your theme before editing CSS (so you can revert easily).

  • Check changes on a real phone (sometimes dev tools look different).

  • If Kofe has a font-size control inside Theme Settings, use that instead of CSS — it’s safe

5

Thank you. This didn’t work for me. Here is my store link. https://hellacomplicated.com/ Password Welcome123

6

Here is my store link. https://hellacomplicated.com/ Password Welcome123

7

do you want like this?

image
image1366×768 110 KB

8

I would like the font larger or to shorten the menu. So that there isn’t so much space below, if possible

9

@meggriffin it can look like this

image
image1366×768 108 KB

10

Yes, this works! Thank you.

11

@meggriffin please add this css to the very end of your base.css file and check

shopify admin->online store->themes->edit theme code->assets->base.css

@media screen and (maxwidth:749px){
div#menu-drawer{height: auto;}
}