Can't find collections in mobile view, any solutions?

Store Design

Topic summary

A user reported that their store’s mobile navigation menu doesn’t display all collection items, with some hidden from view due to the menu’s limited height.

Root Cause:
The mobile dropdown menu isn’t expanding to full height, preventing users from accessing all sub-menu items. This appears to be a theme-level issue affecting how navigation elements render on mobile devices.

Solutions Provided:

  • CSS Fix (Confirmed Working): Add custom CSS to the theme’s base stylesheet that sets overflow-y: auto and max-height: 232px on the mobile navigation wrapper, enabling scrolling within the menu

  • Alternative Approaches:

    • Redesign the mobile menu structure entirely to accommodate the large number of items
    • Configure separate navigation menus for desktop and mobile views
    • Check theme settings for built-in mobile menu options
    • Contact the theme developer (appears to be using DSL Theme 6.0) to report the underlying issue

Resolution: The user successfully implemented the CSS solution by adding overflow: scroll to enable scrolling through all menu items.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hello, im having a issue with my mobile view in category. I have multiple collections and cant find in my mobile view.

www.bizsupplystore.com

Pw: adm!n321

Screenshot_2023-01-03-13-18-19-614_com.android.chrome.jpg
Screenshot_2023-01-03-13-18-19-614_com.android.chrome.jpg1080×2400 147 KB

2

Hi @Pedz23

This is Victor from PageFly - Landing Page Builder App.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file base.css

@media screen and (max-width: 767px){
.mobile-nav-wrapper{
height: 100% !important;
}
}

Hope this answer helps.
Best regards,
Victor | PageFly

3

You menu items are quite large. So, this will hide the whole page in mobile.

Options-

  1. Need to change the whole design of mobile menu. So all the items can be shown

  2. You can choose a different menu for mobile and desktop.

if you need more help feel free to contact me.

4

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.css

@media only screen and (max-width: 767px) {  
   #MobileNav > .tmenu_item_active.tmenu_item_mobile>.tmenu_submenu {
       overflow-y: auto;
       max-height: 232px;
   }    
}

Output:

WebDeskSolution_0-1672743738579.png
WebDeskSolution_0-1672743738579.png337×523 23.9 KB

If you find our reply helpful, please hit Like and Mark it as a Solution.

An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

5

it worked! i just add overflow: scroll; ad the last line. thank you!

6

it worked as well. thank you

7

Hi @Pedz23 ,

I checked your store, and your theme has an issue. The sub-menus are being generated in the desktop and mobile versions. In the Mobile version, the drop-down menu is not expanding to the full height as well as there is no scroll to see hidden.

Possible Solution

  • Check theme settings and see if there are any options [I assume you are using DSL Theme 6.0]
  • Check with the theme developer and raise an issue with them.