Brooklyn theme: hamburger menu collections cut off on mobile

Store Design
1

Hi everyone,

I’ve just changed the interface of my website and have organised my products into categories in a drop down menu under the title “shop”.

On mobiles the menu cuts off and doesn’t show all the categories and doesn’t allow scrolling. Any ideas how to fix this? There is no mention of a limit to how many collections you can have in a hamburger menu.

DA75A793-5954-4047-9E05-F50F8B9F7F48.jpeg
DA75A793-5954-4047-9E05-F50F8B9F7F48.jpeg828×1792 66.4 KB

my website is awongolding.com

Thanks.

Awon x

1 Like
2

change the max-height in your css style from 700px to 1200px.

the class

mobile-nav–expanded + .mobile-nav__sublist {

max-height:700px;

}

To

.mobile-nav–expanded + .mobile-nav__sublist {

max-height:1200px;

}

1 Like
3

Hi @Awon_Golding ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/timber.scss.css->paste below code at the bottom of the file:
.mobile-nav--expanded + .mobile-nav__sublist {
    max-height: 1200px !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

4

@Awon_Golding

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

1 Like
5

Thank you for this. Sorted it out immediately

6

Sorted it out now. It was on mobile. AvadaCommerce’s comment fixed the problem