Overflow hidden in Mobile Menu Debut Theme

Solved
Elisaw
Explorer
60 2 4

Hello I am working with the Debut Theme for this shop: tartar-berlin.com. On the mobile version the menu is a bit broken. If you open "Specials" for example you cannot see all of the sub-menu options. Is there a way to fix this? Maybe an issue with the scrolling functionality?

0 Likes
LitExtension
Shopify Partner
926 109 161

Hi @Elisaw 

To solve your problem. Please place this code at the end of theme.scss to enlarge the text inside the search bar.
.mobile-nav-wrapper {
position: fixed;
background-color: white;
display: none;
margin-top: 60px;
overflow: hidden;
width: 100%;
height: 100%;
z-index: 999;
overflow-y: auto;
}
.mobile-nav {
display: block;
height: 100%;
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1);
}
- Link to refer: https://prnt.sc/10wff3e
- Hope this helps.

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
Elisaw
Explorer
60 2 4

This is an accepted solution.

@LitExtensionthanks for your help! I ended up just adding a max-height and an overflow-y: scroll. This seems to work! Your solution made the menu take over the entire screen which was not what I was looking for but helped to figure out what to do

0 Likes