Need Fix - mobile menu bug due to sticky header

Solved

Success.

Explorer
55 5 7

Hi @justink Could you check again? I can scroll the menu on my desktop. Chrome

Tender - Shopify Theme Design/Development Group
techdevcrazy@gmail.com
0 Likes
Explorer
55 5 7

@justink Sorry, you have to add one more code.

Add this below height:100%;

 

overflow-y: auto;

Tender - Shopify Theme Design/Development Group
techdevcrazy@gmail.com
1 Like
Excursionist
20 1 5

 


@Tender_T wrote:

Hi @justink Could you check again? I can scroll the menu on my desktop. Chrome

 

Oh no, desktop has never been the issue.  ON MOBILE, I cannot scroll the entire "Sections" drop-down -- it should go from Section 1 all the way to the last item which is Section 20.  It's "stuck" at Section 4 for me (small iphone).

Know what I mean?



 

0 Likes

Success.

Excursionist
20 1 5

This finally worked.  Thanks Laurels!! :

PS - anything I don't need in the code below?? or all good?

You'll see you can now scroll all the way down to bottom section, "Section 20"  --- via "SECTIONS" in hamburger menu.  Awesome, thanks:
https://collegechemistrynotes.com


---------

#shopify-section-header {
position: fixed;
background-color: #FFFFFF;
width: 100%;
z-index: 200;
}

#MainContent {
margin-top: 95px;
}

div#SearchDrawer {
z-index: 201;
}

.is-active+.mobile-nav__dropdown {

height: 100%;
overflow-y: auto;

}

2 Likes
Highlighted
New Member
2 0 0

Hi,

 

I'm having the same problem as this and have added the code suggested by Laurels. In my case this allows the sub menu to scroll down a little but not right down to the bottom of the menu and the main drop down menu doesn't scroll at all. I can still see the home page or product page scrolling up behind the web address when I try and scroll down. The site is https://jamesandmay.co.uk. The problem is most evident on the main drop down menu and the 'Blankets and Throws' sub menu. 

 

I've copied my code below as it currently stands.

 

#shopify-section-header {
position: fixed;
background-color: $color-body;
width: 100%;
z-index: 200;
}

#MainContent {
margin-top: 50px;
}

div#SearchDrawer {
z-index: 201;
}

.is-active+.mobile-nav__dropdown {
height: 100%;
overflow-y: auto;
}

 

I would really appreciate any help!! At the moment our customers can't access all the menu items when on mobile! Thanks.

 

0 Likes
Explorer
55 5 7

@idesigner19 Seems like your dropdown works well on my devices. Could you explain a bit more about the issue?

 

Tender - Shopify Theme Design/Development Group
techdevcrazy@gmail.com
0 Likes
New Member
2 0 0
Hi,

Thanks for responding so quickly. I’m glad to hear the menus are working properly on some devices! I’m still on a small iPhone and I can’t scroll any further down the menus than shown in the two screen shots above. This means I am missing the link for the ‘Alpaca blankets and throws’ in the sub menu and for the ‘stories’ in the main menu. Thanks.
0 Likes
Explorer
55 5 7

@idesigner19 The easiest way is to reduce padding of your menu items as following:

@media(max-width: 480px) {

  .mobile-nav__link, .mobile-nav__sublist-link {

    padding: 12px 30px;

  }

}

Tender - Shopify Theme Design/Development Group
techdevcrazy@gmail.com
0 Likes