Need help removing whitespace below menu items.

Store Design
, , , , , , ,
1

Hey, there is alot of whitespace showing on my menu on the mobile site. It isn’t on the desktop site. Any way to fix this issue? Screenshot attached below:

mahad18_0-1689224872870.png
mahad18_0-1689224872870.png561×847 18.2 KB

store link: wokebyrk.myshopify.com

2

@mahad18

Please Add the following CSS code to your assets/main.css bottom of the file.

@media (max-width: 768px) {
.side-menu .main-menu {
    margin-bottom: 13px !important;
    height: auto !important;
}
}

Thanks!

1 Like
3

Hello @mahad18 ,

You can try to follow these steps:
Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file → add this following code at the bottom of page

@media (max-width: 768px) {
  .side-menu .main-menu {
    margin-bottom: 0 !important;
    height: auto !important;
  }
  .side-menu .main-menu li {
    width: 100%;
  }
  .side-menu .main-menu a {
    display: block;
    width: 100%;
  }
}

Save and preview

Hope this can help. Let us know if you need any further support.

Transcy

4

@mahad18

add this code to your main.css file.

Navigate to the online store >> Click edit theme code.

Now find main.css and paste the following code:

@media(max-width:780px){
  .side-menu .main-menu li.item-topbar-mobile.p-b-8.p-l-20.p-t-8{
    display: none !important;
  }
}