Need Fix - mobile menu bug due to sticky header

Solved
Excursionist
20 1 5
Hi all, easiest way to explain my MOBILE MENU problem is:
1. My site is https://collegechemistrynotes.com

2. Tap “Menu” icon, then “Sections” — I cannot scroll down submenu all the way to Section 20. No “room” to scroll. It gets stuck (on my small iPhone) at Section 4

3. Code I added earlier today (that broke my mobile menu) to make my header and announcement bar “sticky” was this in theme.scss.liquid

#shopify-section-header {
position: fixed;
background-color: #ffffff;
width: 100%;
z-index: 200;
}
#MainContent {
margin-top: 95px;
}
div#SearchDrawer {
z-index: 201;
}

———-
Some similar fixes/threads on this but all trials and errors have failed me. Very long and frustrating experience!

Anybody know how I can get all of my lengthy drop-down menu to work properly?
0 Likes
Excursionist
20 1 5
Anybody know how to fix this? Let me see if I can upload a screenshot
0 Likes
Excursionist
20 1 5

Screenshot 2019-03-24 at 8.37.06 AM.pngbug - can't scroll down to Section 20 -- happened after making my header area "sticky"

0 Likes
Excursionist
20 1 5

Does this have something to do with it, in my theme.js area?  Unwilling to screw with anything until I know....

function openMobileNav() {
var translateHeaderHeight = cache.$siteHeader.outerHeight();

cache.$mobileNavContainer.prepareTransition().addClass(classes.navOpen);

cache.$mobileNavContainer.css({
transform: 'translateY(' + translateHeaderHeight + 'px)'
});

cache.$pageContainer.css({
transform:
'translate3d(0, ' + cache.$mobileNavContainer[0].scrollHeight + 'px, 0)'
});

0 Likes
Explorer
55 5 7

Hi @justink 

 

Your solution is very simple.

Here's the answer.

Fix shopify-section-header css like this.

 

#shopify-section-header {

  positionfixed;

  background-color: #FFFFFF;

  width: 100%;

  z-index: 200;

  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 

 

Your solution is very simple.

Here's the answer.

Fix shopify-section-header css like this.

 

#shopify-section-header {

  positionfixed;

  background-color: #FFFFFF;

  width: 100%;

  z-index: 200;

  height: 100%;

  overflow-y: auto;



Thanks Laurels, but that did not work for me.  I put your suggestion in the theme.scss.liquid area. That was the correct area, no?

Any other suggestions?

0 Likes
Astronaut
1094 150 274
Not on PC at the moment but tomorrow I'll take a look, @Tender_T was definitely on the right track, that is generally how you would fix an issue like this.
If my solution helped you, please like and accept as solution! ??
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Explorer
55 5 7

No problem. I don't see you updated theme.scss.liquid as I suggested.


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

That's correct area. A quick fix is to add following code to theme.scss.liquid file.

.is-active+.mobile-nav__dropdown {

  height: 100%;

}

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

@Tender_T wrote:

That's correct area. A quick fix is to add following code to theme.scss.liquid file.

.is-active+.mobile-nav__dropdown {

  height: 100%;

}


Thanks for the help Laurels,  Just tried and still having the issue.  Here's my entire code at bottom of theme.scss.liquid.  See anything that could be causing the problem?  Perhaps is the fact I have my search bar "always open" on desktop?  I have no idea....

#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%;

}


 

1 Like